diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue index 84eed8c4..42c6825a 100644 --- a/app/javascript/submission_form/initials_step.vue +++ b/app/javascript/submission_form/initials_step.vue @@ -190,8 +190,20 @@ export default { this.$emit('start') }) + + this.intersectionObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth + this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3 + } + }) + }).observe(this.$refs.canvas) } }, + beforeUnmount () { + this.intersectionObserver?.disconnect() + }, methods: { remove () { this.$emit('update:model-value', '') diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue index 9e4416db..6fe94974 100644 --- a/app/javascript/submission_form/signature_step.vue +++ b/app/javascript/submission_form/signature_step.vue @@ -104,7 +104,7 @@ v-show="!modelValue && !computedPreviousValue" ref="canvas" style="padding: 1px; 0" - class="bg-white border border-base-300 rounded-2xl" + class="bg-white border border-base-300 rounded-2xl w-full" /> { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth + this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3 + } + }) + }).observe(this.$refs.canvas) } }, + beforeUnmount () { + this.intersectionObserver?.disconnect() + }, methods: { remove () { this.$emit('update:model-value', '')