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) {
+          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) {

app/views/submissions/show.html.erb

@@ -5,7 +5,7 @@
       <span class="text-3xl font-semibold focus:text-clip"><%= @submission.template.name %></span>
     </a>
     <div class="space-x-3 flex items-center">
-      <% if last_submitter = @submission.submitters.select(&:completed_at?).max_by(&:completed_at) %>
+      <% if last_submitter = @submission.submitters.to_a.select(&:completed_at?).max_by(&:completed_at) %>
         <download-button data-src="<%= submitter_download_index_path(last_submitter.slug) %>" class="base-button">
           <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
             <%= svg_icon('download', class: 'w-6 h-6') %>
@@ -16,6 +16,8 @@
             <span>Downloading</span>
           </span>
         </download-button>
+      <% elsif @submission.submitters.to_a.size == 1 %>
+        <%= render 'shared/clipboard_copy', text: start_form_url(slug: @submission.template.slug), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Share Link', copied_title: 'Copied to Clipboard' %>
       <% end %>
     </div>
   </div>

app/views/submit_form/show.html.erb

@@ -1,6 +1,8 @@
 <% fields_index = Templates.build_field_areas_index(@submitter.submission.template) %>
 <% values = @submitter.submission.submitters.where.not(id: @submitter.id).reduce({}) { |acc, sub| acc.merge(sub.values) } %>
 <% attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments).preload(:blob).index_by(&:uuid) %>
+<div style="max-height: -webkit-fill-available;">
+  <div id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
       <div class="mt-4 flex">
         <a href="<%= root_path %>" class="mx-auto text-2xl md:text-3xl font-bold items-center flex space-x-3">
@@ -25,10 +27,12 @@
       <% end %>
       <%= render 'shared/attribution' %>
     </div>
+  </div>
+</div>
 <div class="fixed bottom-0 w-full h-0 z-20">
   <div class="mx-auto" style="max-width: 1000px">
     <div class="relative md:mx-32">
-      <div class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border border-base-200 border p-4 rounded">
+      <div id="form_container" class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border border-base-200 border p-4 rounded">
         <submission-form data-submitter-uuid="<%= @submitter.uuid %>" data-submitter-slug="<%= @submitter.slug %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= attachments_index.values.select { |e| e.record_id == @submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submitter.submission.template.fields.select { |f| f['submitter_uuid'] == @submitter.uuid }.to_json %>" data-values="<%= @submitter.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></submission-form>
       </div>
     </div>