adjust mobile ui

app/views/templates/_dropzone.html.erb

@@ -16,7 +16,7 @@
               <%= t('click_to_upload_or_drag_and_drop_html') %>
             </div>
             <% if Docuseal.multitenant? %>
-              <a class="flex absolute bottom-4 items-center text-sm mt-2 pointer-events-auto" href="<%= new_template_path(modal_tab: 'google_drive') %>" data-turbo-frame="modal">
+              <a class="flex absolute bottom-4 items-center text-sm mt-2 pointer-events-auto" href="<%= new_template_path(modal_tab: 'google_drive') %>" data-turbo-frame="modal" data-native-modal="medium">
                 <span><%= t('or_add_from') %></span>
                 <%= svg_icon('brand_gdrive', class: 'w-4 h-4 ml-1') %>
                 <span class="ml-1 font-medium hover:underline">Google Drive</span>

app/views/templates/_submission.html.erb

@@ -53,7 +53,7 @@
               <% if !submitter.completed_at? && !submission.completed_at? && can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
                 <span class="pl-0.5 shrink-0 tooltip tooltip-top tooltip-no-touch max-md:before:hidden max-md:after:hidden md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
                   <open-modal-mobile>
-                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
+                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
                       <%= svg_icon('pencil', class: 'w-5 h-5') %>
                     <% end %>
                   </open-modal-mobile>
@@ -67,13 +67,13 @@
         <% if submitter.completed_at? %>
           <div class="flex-1 min-w-0 md:flex-none">
             <div class="w-full md:w-fit">
-              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm btn-neutral text-white w-full md:w-36">
+              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm max-sm:normal-case btn-neutral text-white w-full md:w-36">
                 <span class="flex items-center justify-center space-x-1 <%= 'md:space-x-2' if t('download').length < 11 %>" data-target="download-button.defaultButton">
-                  <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
+                  <%= svg_icon('download', class: 'w-5 h-5 max-sm:w-4 max-sm:h-4 stroke-2') %>
                   <span class="inline"><%= t('download') %></span>
                 </span>
                 <span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
-                  <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
+                  <%= svg_icon('loader', class: 'w-5 h-5 max-sm:w-4 max-sm:h-4 animate-spin') %>
                   <span class="inline"><%= t('download')[..-2] %>...</span>
                 </span>
               </download-button>
@@ -82,7 +82,7 @@
         <% elsif !submission.archived_at? && !template&.archived_at? && !submission.expired? && !submitter.declined_at? %>
           <% if current_user.email == submitter.email %>
             <div class="flex-1 min-w-0 md:flex-none md:w-36 flex">
-              <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
+              <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm max-sm:normal-case btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
                 <span class="flex items-center justify-center space-x-1 md:space-x-2">
                   <% if t('sign_now').length < 12 %>
                     <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@@ -93,12 +93,12 @@
             </div>
           <% else %>
             <div class="flex-1 min-w-0 md:flex-none">
-              <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'btn btn-sm btn-neutral text-white md:w-36 flex z-[1]', icon_class: 'w-6 h-6 text-white', copy_title: t('copy_link').length < 10 ? t('copy_link') : t('copy'), copy_title_md: t('link'), copied_title_md: t('copied') %>
+              <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'btn btn-sm max-sm:normal-case btn-neutral text-white md:w-36 flex z-[1]', icon_class: 'w-6 h-6 max-sm:w-5 max-sm:h-5 text-white', copy_title: t('copy_link').length < 10 ? t('copy_link') : t('copy'), copy_title_md: t('link'), copied_title_md: t('copied') %>
             </div>
           <% end %>
         <% end %>
         <div class="flex-1 min-w-0 md:flex-none z-[1]">
-          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm w-full md:w-24">
+          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm max-sm:normal-case w-full md:w-24">
             <%= t('view') %>
           </a>
         </div>
@@ -149,7 +149,7 @@
                     <% if !submitter.completed_at? && !submission.completed_at? && can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
                       <span class="pl-0.5 shrink-0 tooltip tooltip-top tooltip-no-touch max-md:before:hidden max-md:after:hidden md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
                         <open-modal-mobile>
-                          <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
+                          <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
                             <%= svg_icon('pencil', class: 'w-5 h-5') %>
                           <% end %>
                         </open-modal-mobile>
@@ -158,7 +158,7 @@
                   </span>
                 </span>
                 <% if submitter.completed_at? && !is_submission_completed %>
-                  <download-button data-src="<%= submitter_download_index_path(submitter) %>" class="btn btn-xs btn-neutral text-white w-12 md:w-36 shrink-0 z-[1]">
+                  <download-button data-src="<%= submitter_download_index_path(submitter) %>" class="btn btn-xs max-sm:normal-case btn-neutral text-white w-12 md:w-36 shrink-0 z-[1]">
                     <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
                       <%= svg_icon('download', class: 'w-4 h-4 stroke-2') %>
                       <span class="hidden md:inline"><%= t('download') %></span>
@@ -171,14 +171,14 @@
                 <% elsif !template&.archived_at? && !submission.archived_at? && !is_submission_completed && !submission.expired? && !submitter.declined_at? %>
                   <div class="relative flex items-center space-x-3 shrink-0">
                     <% if current_user.email == submitter.email %>
-                      <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-xs btn-outline btn-neutral bg-white w-12 md:w-36 z-[1]">
+                      <a href="<%= submit_form_path(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-xs max-sm:normal-case btn-outline btn-neutral bg-white w-12 md:w-36 z-[1]">
                         <span class="flex items-center justify-center space-x-1 md:space-x-2">
                           <%= svg_icon('writing_sign', class: "w-4 h-4 stroke-2 #{'md:hidden' if t('sign_now').length >= 12}") %>
                           <span class="hidden md:inline shrink-0"><%= t('sign_now') %></span>
                         </span>
                       </a>
                     <% else %>
-                      <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'relative btn btn-xs text-xs btn-neutral text-white w-12 md:w-36 flex z-[1]', icon_class: 'w-4 h-4 text-white', copy_title: t('copy_link') %>
+                      <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug, host: form_link_host), class: 'relative btn btn-xs max-sm:normal-case text-xs btn-neutral text-white w-12 md:w-36 flex z-[1]', icon_class: 'w-4 h-4 text-white', copy_title: t('copy_link') %>
                     <% end %>
                   </div>
                 <% end %>
@@ -192,13 +192,13 @@
           <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
           <div class="flex-1 min-w-0 md:flex-none">
             <div class="w-full md:w-fit">
-              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm btn-neutral text-white w-full md:w-36 z-[1]">
+              <download-button data-src="<%= submission_download_index_path(submission) %>" class="btn btn-sm max-sm:normal-case btn-neutral text-white w-full md:w-36 z-[1]">
                 <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
-                  <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
+                  <%= svg_icon('download', class: 'w-5 h-5 max-sm:w-4 max-sm:h-4 stroke-2') %>
                   <span class="inline"><%= t('download') %></span>
                 </span>
                 <span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
-                  <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
+                  <%= svg_icon('loader', class: 'w-5 h-5 max-sm:w-4 max-sm:h-4 animate-spin') %>
                   <span class="inline"><%= t('download')[..-2] %>...</span>
                 </span>
               </download-button>
@@ -206,7 +206,7 @@
           </div>
         <% elsif !template&.archived_at? && !submission.archived_at? && !submission.expired? && (sign_now_submitter = submitters.find { |item| !item.completed_at? && !item.declined_at? && current_user.email == item.email }) %>
           <div class="flex-1 min-w-0 flex md:hidden">
-            <a href="<%= submit_form_path(slug: sign_now_submitter.slug) %>" data-turbo="false" target="_blank" class="btn btn-sm btn-neutral btn-outline bg-white w-full flex z-[1]">
+            <a href="<%= submit_form_path(slug: sign_now_submitter.slug) %>" data-turbo="false" target="_blank" class="btn btn-sm max-sm:normal-case btn-neutral btn-outline bg-white w-full flex z-[1]">
               <span class="flex items-center justify-center space-x-1">
                 <% if t('sign_now').length < 12 %>
                   <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@@ -217,7 +217,7 @@
           </div>
         <% end %>
         <div class="flex-1 min-w-0 md:flex-none z-[1]">
-          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm w-full md:w-24">
+          <a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm max-sm:normal-case w-full md:w-24">
             <%= t('view') %>
           </a>
         </div>

app/views/templates/_template.html.erb

@@ -32,7 +32,7 @@
     <div class="space-y-1">
       <% if can?(:update, template) && !template.archived_at? && template.account_id == current_account.id %>
         <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('move') %>">
-          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" data-native-modal="medium" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('folder_share', class: 'w-4 h-4') %>
           </a>
         </span>
@@ -53,7 +53,7 @@
       <% end %>
       <% if can?(:create, template) %>
         <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('clone') %>">
-          <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+          <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" data-native-modal="medium" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('copy', class: 'w-4 h-4') %>
           </a>
         </span>

app/views/templates/_title.html.erb

@@ -39,7 +39,7 @@
             </a>
             <% if can?(:update, template) %>
               <span class="pl-1 tooltip tooltip-right tooltip-no-touch md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="<%= t('move') %>">
-                <a href="<%= edit_template_folder_path(template.id, subfolder: @template.folder.parent_folder.present?) %>" data-turbo-frame="modal">
+                <a href="<%= edit_template_folder_path(template.id, subfolder: @template.folder.parent_folder.present?) %>" data-turbo-frame="modal" data-native-modal="medium">
                   <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
                 </a>
               </span>
@@ -71,7 +71,7 @@
           </div>
         <% end %>
         <open-modal-mobile class="absolute md:relative -bottom-1 md:bottom-0 right-0 mt-1">
-          <%= link_to template_share_link_path(template), class: 'btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white px-2', data: { turbo_frame: :modal } do %>
+          <%= link_to template_share_link_path(template), class: 'btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white px-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
             <span class="flex items-center justify-center space-x-2">
               <%= svg_icon('link', class: 'w-4 h-4 md:w-6 md:h-6') %>
               <span><%= t('link') %></span>
@@ -85,11 +85,11 @@
     <% unless template.archived_at? %>
       <% if can?(:create, Submission) %>
         <native-action data-section="send" data-icon="send" data-label="<%= t('send') %>">
-          <a href="<%= new_template_submission_path(template) %>" data-turbo-frame="modal"></a>
+          <a href="<%= new_template_submission_path(template) %>" data-turbo-frame="modal" data-native-modal="<%= 'medium' if template.submitters.size < 3 %>"></a>
         </native-action>
       <% end %>
       <native-action data-section="send" data-icon="writing" data-label="<%= t('sign_yourself') %>">
-        <a href="<%= new_template_submission_path(template, selfsign: true) %>" data-turbo-frame="modal"></a>
+        <a href="<%= new_template_submission_path(template, selfsign: true) %>" data-turbo-frame="modal" data-native-modal="<%= 'medium' if template.submitters.size < 3 %>"></a>
       </native-action>
     <% end %>
     <% if !template.archived_at? && can?(:update, template) %>
@@ -102,7 +102,7 @@
     <% end %>
     <% if can?(:create, current_account.templates.new(author: current_user)) %>
       <native-action data-section="edit" data-icon="copy" data-label="<%= t('clone') %>">
-        <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal"></a>
+        <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" data-native-modal="medium"></a>
       </native-action>
     <% end %>
     <% if template.archived_at? || (!can?(:update, template) && can?(:read, template)) %>
@@ -112,12 +112,12 @@
     <% end %>
     <% if local_assigns[:with_export] %>
       <native-action data-section="edit" data-icon="download" data-label="<%= t('export') %>">
-        <a href="<%= new_template_submissions_export_path(template, params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS)) %>" data-turbo-frame="modal"></a>
+        <a href="<%= new_template_submissions_export_path(template, params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS)) %>" data-turbo-frame="modal" data-native-modal="medium"></a>
       </native-action>
     <% end %>
     <% if !template.archived_at? && can?(:update, template) && @template.account_id == current_account.id %>
       <native-action data-section="edit" data-icon="folder" data-label="<%= t('move') %>">
-        <a href="<%= edit_template_folder_path(template.id, subfolder: @template.folder.parent_folder.present?) %>" data-turbo-frame="modal"></a>
+        <a href="<%= edit_template_folder_path(template.id, subfolder: @template.folder.parent_folder.present?) %>" data-turbo-frame="modal" data-native-modal="medium"></a>
       </native-action>
     <% end %>
     <% if can?(:destroy, template) %>
@@ -145,7 +145,7 @@
       <% end %>
       <% if can?(:create, current_account.templates.new(author: current_user)) %>
         <div class="flex-1">
-          <%= link_to new_template_clone_path(template), class: 'btn btn-outline btn-sm w-full', data: { turbo_frame: :modal } do %>
+          <%= link_to new_template_clone_path(template), class: 'btn btn-outline btn-sm w-full', data: { turbo_frame: :modal, native_modal: :medium } do %>
             <span class="flex items-center justify-center space-x-2">
               <%= svg_icon('copy', class: 'w-6 h-6') %>
               <span class="inline"><%= t('clone') %></span>

app/views/templates/show.html.erb

@@ -8,7 +8,7 @@
   <native-action data-placement="search" data-native="search" data-label="<%= t('search') %>" data-url="<%= search_index_path(filter_params.to_h.merge({ 'scope' => 'submissions', 'template_id' => @template.id, 'archived' => ('true' if @template.archived_at?) }.compact)) %>"></native-action>
   <% if !@template.archived_at? && can?(:create, Submission) %>
     <native-action data-placement="footer" data-icon="send" data-label="<%= t('send_to_recipients') %>">
-      <a href="<%= new_template_submission_path(@template) %>" data-turbo-frame="modal"></a>
+      <a href="<%= new_template_submission_path(@template) %>" data-turbo-frame="modal" data-native-modal="<%= 'medium' if @template.submitters.size < 3 %>"></a>
     </native-action>
   <% end %>
 <% end %>
@@ -24,13 +24,13 @@
         <% if !turbo_native_app? && (params[:q].present? || params[:status].present? || filter_params.present? || @pagy.pages > 1) %>
           <%= render 'shared/search_input' %>
         <% end %>
-        <%= link_to new_template_submissions_export_path(@template, params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS)), class: 'hidden md:flex btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+        <%= link_to new_template_submissions_export_path(@template, params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS)), class: 'hidden md:flex btn btn-ghost text-base', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
           <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
           <span><%= t('export') %></span>
         <% end %>
         <% if !@template.archived_at? && can?(:create, Submission) %>
           <open-modal-mobile class="flex">
-            <%= link_to new_template_submission_path(@template), id: 'add_recipients_button', class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
+            <%= link_to new_template_submission_path(@template), id: 'add_recipients_button', class: 'white-button !border', data: { turbo_frame: 'modal', native_modal: ('medium' if @template.submitters.size < 3) } do %>
               <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
               <%= t('add_recipients_html') %>
             <% end %>
@@ -104,7 +104,7 @@
             <div class="space-y-2 flex flex-col">
               <% if can?(:create, Submission) %>
                 <open-modal-mobile class="flex flex-col mt-6">
-                  <%= link_to new_template_submission_path(@template, with_link: true), id: 'send_to_recipients_button', class: 'base-button', data: { turbo_frame: 'modal' } do %>
+                  <%= link_to new_template_submission_path(@template, with_link: true), id: 'send_to_recipients_button', class: 'base-button', data: { turbo_frame: 'modal', native_modal: ('medium' if @template.submitters.size < 3) } do %>
                     <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
                     <span class="mr-1"><%= t('send_to_recipients') %></span>
                   <% end %>
@@ -117,7 +117,7 @@
                 <% end %>
               <% else %>
                 <open-modal-mobile class="flex flex-col mt-6">
-                  <%= link_to new_template_submission_path(@template, selfsign: true), id: 'sign_yourself_button', class: 'white-button', data: { turbo_frame: 'modal' } do %>
+                  <%= link_to new_template_submission_path(@template, selfsign: true), id: 'sign_yourself_button', class: 'white-button', data: { turbo_frame: 'modal', native_modal: ('medium' if @template.submitters.size < 3) } do %>
                     <%= svg_icon('writing', class: 'w-6 h-6') %>
                     <span class="mr-1"><%= t('sign_it_yourself') %></span>
                   <% end %>