fix form scroll on iphone

app/javascript/submission_form/areas.vue

@@ -73,7 +73,11 @@ export default {
     scrollIntoField (field) {
       this.areaRefs.find((area) => {
         if (area.field === field) {
-          area.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          if (document.body.style.overflow === 'hidden') {
+            this.scrollInContainer(area.$el)
+          } else {
+            area.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          }
 
           return true
         } else {
@@ -81,6 +85,15 @@ export default {
         }
       })
     },
+    scrollInContainer (target) {
+      const padding = 64
+      const boxRect = window.scrollbox.children[0].getBoundingClientRect()
+      const targetRect = target.getBoundingClientRect()
+
+      const targetTopRelativeToBox = targetRect.top - boxRect.top
+
+      window.scrollbox.scrollTop = targetTopRelativeToBox - document.body.offsetHeight + window.form_container.offsetHeight + target.offsetHeight + padding
+    },
     setAreaRef (el) {
       if (el) {
         this.areaRefs.push(el)

app/javascript/submission_form/form.vue

@@ -369,6 +369,13 @@ export default {
       this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
       this.stepFields.length - 1
     )
+
+    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+      document.body.style.overflow = 'hidden'
+
+      window.scrollbox.classList.add('h-full', 'overflow-y-auto')
+      window.scrollbox.parentNode.classList.add('h-screen', 'overflow-y-auto')
+    }
   },
   methods: {
     goToStep (step, scrollToArea = false, clickUpload = false) {