From 547bc9aa9463afcec67535a556e86f6cfa519dbd Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 17 Sep 2026 22:16:09 +0300
Subject: [PATCH] adjust mobile ui

---
 app/javascript/application.js                 |  2 +-
 .../template_builder/area_title.vue           |  4 +--
 .../template_builder/custom_field.vue         |  4 +--
 app/javascript/template_builder/field.vue     |  4 +--
 app/javascript/template_builder/preview.vue   |  4 +--
 app/views/shared/_native_navbar.html.erb      |  4 +--
 app/views/submissions/_detailed_form.html.erb |  6 ++--
 app/views/submissions/_email_form.html.erb    |  8 ++---
 app/views/submissions/_phone_form.html.erb    |  8 ++---
 app/views/submissions/new.html.erb            |  2 +-
 app/views/submissions/show.html.erb           |  2 +-
 .../submissions_dashboard/index.html.erb      |  2 +-
 .../_applied_filters.html.erb                 | 12 +++----
 .../_filter_button.html.erb                   | 10 +++---
 app/views/template_folders/show.html.erb      |  2 +-
 app/views/templates/_dropzone.html.erb        |  2 +-
 app/views/templates/_submission.html.erb      | 32 +++++++++----------
 app/views/templates/_template.html.erb        |  4 +--
 app/views/templates/_title.html.erb           | 16 +++++-----
 app/views/templates/show.html.erb             | 10 +++---
 .../index.html.erb                            |  2 +-
 app/views/templates_dashboard/index.html.erb  |  2 +-
 app/views/templates_preferences/show.html.erb |  2 +-
 app/views/templates_share_link/show.html.erb  |  4 ++-
 config/locales/i18n.yml                       |  2 +-
 25 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/app/javascript/application.js b/app/javascript/application.js
index f932c174a..d8f8f2bd3 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -112,7 +112,7 @@ if (window.webkit?.messageHandlers?.native) {
   })
 
   document.addEventListener('turbo:load', () => {
-    if (staleSnapshots.delete(window.location.href.split('#')[0]) && isRestoring) {
+    if (staleSnapshots.delete(window.location.href.split('#')[0]) && isRestoring && window.location.pathname !== '/search') {
       setTimeout(() => window.Turbo.session.refresh(document.baseURI))
     }
   })
diff --git a/app/javascript/template_builder/area_title.vue b/app/javascript/template_builder/area_title.vue
index 7d1792a7f..e8a6f1358 100644
--- a/app/javascript/template_builder/area_title.vue
+++ b/app/javascript/template_builder/area_title.vue
@@ -388,7 +388,7 @@ export default {
   methods: {
     openFormulaModal () {
       if (window.webkit?.messageHandlers?.modal) {
-        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'formula', uuid: this.field.uuid })
+        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'formula', detent: 'medium', uuid: this.field.uuid })
       } else {
         this.isShowFormulaModal = true
       }
@@ -409,7 +409,7 @@ export default {
     },
     openDescriptionModal () {
       if (window.webkit?.messageHandlers?.modal) {
-        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'description', uuid: this.field.uuid })
+        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'description', detent: 'medium', uuid: this.field.uuid })
       } else {
         this.isShowDescriptionModal = true
       }
diff --git a/app/javascript/template_builder/custom_field.vue b/app/javascript/template_builder/custom_field.vue
index 6e014e980..ca9e3d12c 100644
--- a/app/javascript/template_builder/custom_field.vue
+++ b/app/javascript/template_builder/custom_field.vue
@@ -262,7 +262,7 @@ export default {
   methods: {
     openFormulaModal () {
       if (window.webkit?.messageHandlers?.modal) {
-        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'formula', custom_field_uuid: this.field.uuid })
+        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'formula', detent: 'medium', custom_field_uuid: this.field.uuid })
       } else {
         this.isShowFormulaModal = true
       }
@@ -276,7 +276,7 @@ export default {
     },
     openDescriptionModal () {
       if (window.webkit?.messageHandlers?.modal) {
-        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'description', custom_field_uuid: this.field.uuid })
+        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'description', detent: 'medium', custom_field_uuid: this.field.uuid })
       } else {
         this.isShowDescriptionModal = true
       }
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index e64aed3c9..1e2787dd6 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -560,7 +560,7 @@ export default {
     },
     openFormulaModal () {
       if (window.webkit?.messageHandlers?.modal) {
-        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'formula', uuid: this.field.uuid })
+        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'formula', detent: 'medium', uuid: this.field.uuid })
       } else {
         this.isShowFormulaModal = true
       }
@@ -581,7 +581,7 @@ export default {
     },
     openDescriptionModal () {
       if (window.webkit?.messageHandlers?.modal) {
-        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'description', uuid: this.field.uuid })
+        window.webkit.messageHandlers.modal.postMessage({ action: 'sheet', name: 'description', detent: 'medium', uuid: this.field.uuid })
       } else {
         this.isShowDescriptionModal = true
       }
diff --git a/app/javascript/template_builder/preview.vue b/app/javascript/template_builder/preview.vue
index 44fe38bf2..8f7485057 100644
--- a/app/javascript/template_builder/preview.vue
+++ b/app/javascript/template_builder/preview.vue
@@ -106,7 +106,7 @@
                     <span>{{ t('reorder_fields') }}</span>
                   </button>
                 </li>
-                <li v-if="withDynamicDocuments && !item.dynamic && document.metadata?.original_uuid">
+                <li v-if="withDynamicDocuments && !isMobile && !item.dynamic && document.metadata?.original_uuid">
                   <button
                     class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm whitespace-nowrap"
                     :disabled="isMakeDynamicLoading"
@@ -217,7 +217,7 @@ export default {
     IconBolt,
     IconPencil
   },
-  inject: ['t', 'getFieldTypeIndex', 'baseFetch'],
+  inject: ['t', 'getFieldTypeIndex', 'baseFetch', 'isMobile'],
   props: {
     item: {
       type: Object,
diff --git a/app/views/shared/_native_navbar.html.erb b/app/views/shared/_native_navbar.html.erb
index 68933e888..89cfd93f7 100644
--- a/app/views/shared/_native_navbar.html.erb
+++ b/app/views/shared/_native_navbar.html.erb
@@ -25,11 +25,11 @@
     <native-action data-placement="create" data-icon="scan" data-native="scan" data-label="<%= t('scan') %>" data-url="<%= templates_upload_path(folder_name: folder_name) %>"></native-action>
     <% if Docuseal.multitenant? %>
       <native-action data-placement="create" data-icon="brand_gdrive">
-        <%= link_to 'Google Drive', new_template_path(modal_tab: 'google_drive', folder_name: folder_name), data: { turbo_frame: :modal } %>
+        <%= link_to 'Google Drive', new_template_path(modal_tab: 'google_drive', folder_name: folder_name), data: { turbo_frame: :modal, native_modal: :medium } %>
       </native-action>
     <% end %>
     <native-action data-placement="create" data-icon="pencil_plus">
-      <%= link_to t('create'), new_template_path(folder_name: folder_name), data: { turbo_frame: :modal } %>
+      <%= link_to t('create'), new_template_path(folder_name: folder_name), data: { turbo_frame: :modal, native_modal: :medium } %>
     </native-action>
   <% end %>
 <% end %>
diff --git a/app/views/submissions/_detailed_form.html.erb b/app/views/submissions/_detailed_form.html.erb
index fbfc3892e..c948f568a 100644
--- a/app/views/submissions/_detailed_form.html.erb
+++ b/app/views/submissions/_detailed_form.html.erb
@@ -3,7 +3,7 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
-      <div class="relative <%= 'p-4 rounded-xl bg-base-300/40' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
+      <div class="relative <%= 'p-4 rounded-xl bg-base-300/40 max-sm:p-0 max-sm:bg-transparent' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
         <div>
           <div class="absolute right-4 top-5">
             <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
@@ -27,7 +27,7 @@
                       <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'base-input !h-10 w-full', placeholder: t('name'), required: index.zero? || template.preferences['require_all_submitters'], value: item['email'].present? ? current_account.submitters.accessible_by(current_ability).where.not(name: nil).order(id: :desc).find_by(email: item['email'])&.name : ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : ''), dir: 'auto', id: "detailed_name_#{item['uuid']}" %>
                     </linked-input>
                   </submitters-autocomplete>
-                  <div class="grid <%= 'md:grid-cols-2 gap-1' if submitters.size == 1 %>">
+                  <div class="grid <%= 'md:grid-cols-2 md:gap-1.5' if submitters.size == 1 %>">
                     <submitters-autocomplete data-field="email">
                       <linked-input data-target-id="<%= "detailed_email_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
                         <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: (local_assigns[:require_email_2fa] == true || local_assigns[:prefillable_fields].present? ? t(:email) : "#{t('email')} (#{t('optional')})"), value: item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : ''), id: "detailed_email_#{item['uuid']}", required: local_assigns[:require_email_2fa] == true && index.zero? %>
@@ -86,7 +86,7 @@
       </div>
     </div>
     <% if params[:selfsign].blank? && local_assigns[:prefillable_fields].blank? && local_assigns[:recipient_form_fields].blank? && local_assigns[:variables_form].blank? %>
-      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center max-sm:hidden" data-action="click:dynamic-list#addItem">
         <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
         <span><%= t('add_new') %></span>
       </a>
diff --git a/app/views/submissions/_email_form.html.erb b/app/views/submissions/_email_form.html.erb
index e552cf9d3..718cb905e 100644
--- a/app/views/submissions/_email_form.html.erb
+++ b/app/views/submissions/_email_form.html.erb
@@ -2,8 +2,8 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <% if submitters.size == 1 && local_assigns[:variables_form] %>
     <% item = submitters.first %>
-    <div class="grid gap-1">
-      <submitter-item class="grid md:grid-cols-2 gap-1">
+    <div class="grid gap-1.5">
+      <submitter-item class="grid md:grid-cols-2 gap-1.5">
         <div class="form-control">
           <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
           <submitters-autocomplete data-field="email">
@@ -34,7 +34,7 @@
   <% else %>
     <dynamic-list class="space-y-4">
       <div class="space-y-4">
-        <div class="relative <%= 'p-4 rounded-xl bg-base-300/40' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
+        <div class="relative <%= 'p-4 rounded-xl bg-base-300/40 max-sm:p-0 max-sm:bg-transparent' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
           <div>
             <div class="absolute right-4 top-5">
               <a href="#" data-action="click:dynamic-list#removeItem" class="-top-3 relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
@@ -60,7 +60,7 @@
         </div>
       </div>
       <% if params[:selfsign].blank? && local_assigns[:variables_form].blank? %>
-        <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+        <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center max-sm:hidden" data-action="click:dynamic-list#addItem">
           <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
           <span><%= t('add_new') %></span>
         </a>
diff --git a/app/views/submissions/_phone_form.html.erb b/app/views/submissions/_phone_form.html.erb
index ce71e9c99..a3d9b92d0 100644
--- a/app/views/submissions/_phone_form.html.erb
+++ b/app/views/submissions/_phone_form.html.erb
@@ -2,16 +2,16 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
-      <div class="relative <%= 'p-4 rounded-xl bg-base-300/40' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
+      <div class="relative <%= 'p-4 rounded-xl bg-base-300/40 max-sm:p-0 max-sm:bg-transparent' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
         <div>
           <div class="absolute right-4 top-5">
             <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
               <%= svg_icon('trash', class: 'w-4 h-4') %>
             </a>
           </div>
-          <div class="grid <%= submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
+          <div class="grid <%= submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1.5' %>">
             <% submitters.each_with_index do |item, index| %>
-              <submitter-item class="grid <%= submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
+              <submitter-item class="grid <%= submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1.5' %>">
                 <div class="form-control">
                   <% if submitters.size > 1 %>
                     <label class="label pt-0 pb-1">
@@ -48,7 +48,7 @@
       </div>
     </div>
     <% if params[:selfsign].blank? && local_assigns[:variables_form].blank? %>
-      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center max-sm:hidden" data-action="click:dynamic-list#addItem">
         <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
         <span><%= t('add_new') %></span>
       </a>
diff --git a/app/views/submissions/new.html.erb b/app/views/submissions/new.html.erb
index 06aa9ebfd..19fa41aa6 100644
--- a/app/views/submissions/new.html.erb
+++ b/app/views/submissions/new.html.erb
@@ -13,7 +13,7 @@
 <%= render 'shared/turbo_modal_large', title: params[:selfsign] ? t('add_recipients') : t('add_new_recipients') do %>
   <% options = [only_detailed ? nil : [t('via_email'), 'email'], only_detailed || !with_phone ? nil : [t('via_phone'), 'phone'], [t('detailed'), 'detailed'], with_list ? [t('upload_list'), 'list'] : nil].compact %>
   <% if options.size > 1 %>
-    <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center px-2 mt-4 block">
+    <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center px-2 block <%= 'mt-4' unless turbo_native_app? %>">
       <div class="flex justify-center">
         <% options.each_with_index do |(label, value), index| %>
           <%= content_tag(value == 'list' ? 'span' : 'toggle-cookies', data: { value:, key: 'add_recipients_tab' }) do %>
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index c977bf311..05e4c7e74 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -211,7 +211,7 @@
               <% if signed_in? && can?(:update, @submission) && submitter && !submitter.completed_at? && !@submission.completed_at? && !submitter.declined_at? && !@submission.archived_at? && !@submission.template&.archived_at? && !@submission.expired? && !submitter.start_form_submission_events.any? %>
                 <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('edit') %>">
                   <open-modal-mobile>
-                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
+                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
                       <%= svg_icon('pencil', class: 'w-5 h-5') %>
                     <% end %>
                   </open-modal-mobile>
diff --git a/app/views/submissions_dashboard/index.html.erb b/app/views/submissions_dashboard/index.html.erb
index 92742603e..b28ac3b0d 100644
--- a/app/views/submissions_dashboard/index.html.erb
+++ b/app/views/submissions_dashboard/index.html.erb
@@ -24,7 +24,7 @@
         <%= render 'templates/upload_button' %>
       </span>
       <open-modal-mobile data-disabled="<%= !Docuseal.multitenant? %>" class="flex">
-        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
           <span class="hidden md:block"><%= t('create') %></span>
         <% end %>
diff --git a/app/views/submissions_filters/_applied_filters.html.erb b/app/views/submissions_filters/_applied_filters.html.erb
index 45de54e23..c83770b0a 100644
--- a/app/views/submissions_filters/_applied_filters.html.erb
+++ b/app/views/submissions_filters/_applied_filters.html.erb
@@ -11,7 +11,7 @@
 <% status_chip_html = capture do %>
   <% if status_icon || default_status_icon %>
     <div class="order-none flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700 <%= 'max-md:hidden' if default_status_icon %>">
-      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon(status_icon || default_status_icon, class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= t(params[:status]) %></span>
       <% end %>
@@ -46,7 +46,7 @@
   <% end %>
   <% if params[:folder].present? %>
     <div class="order-<%= chip_order['folder'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
-      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('folder', class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= params[:folder] %></span>
       <% end %>
@@ -57,7 +57,7 @@
   <% end %>
   <% if params[:author].present? %>
     <div class="order-<%= chip_order['author'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
-      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('user', class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= current_account.users.accessible_by(current_ability).where(account: current_account).find_by(email: params[:author])&.full_name || 'NA' %></span>
       <% end %>
@@ -68,7 +68,7 @@
   <% end %>
   <% if query_params[:completed_at_from].present? || query_params[:completed_at_to].present? %>
     <div class="order-<%= chip_order['completed_at'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
-      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('calendar_check', class: 'w-5 h-5 shrink-0') %>
         <span class="flex flex-col font-normal text-left md:text-center text-xs">
           <% if query_params[:completed_at_from] == query_params[:completed_at_to] %>
@@ -86,7 +86,7 @@
   <% end %>
   <% if query_params[:created_at_from].present? || query_params[:created_at_to].present? %>
     <div class="order-<%= chip_order['created_at'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
-      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
+      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal', native_modal: 'medium' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('calendar', class: 'w-5 h-5 shrink-0') %>
         <span class="flex flex-col font-normal text-left md:text-center text-xs">
           <% if query_params[:created_at_from] == query_params[:created_at_to] %>
@@ -151,7 +151,7 @@
 <% if chips_html.present? || status_chip_html.present? %>
   <scroll-fade class="flex items-center gap-2 overflow-x-auto flex-1 min-w-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 md:contents <%= 'max-md:hidden' if with_status_dropdown %>">
     <% if with_status_button && !with_status_dropdown %>
-      <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" class="order-none md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
+      <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" data-native-modal="medium" class="order-none md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
         <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
         <span><%= t(current_status) %></span>
         <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>
diff --git a/app/views/submissions_filters/_filter_button.html.erb b/app/views/submissions_filters/_filter_button.html.erb
index 3b76d8484..c485080cb 100644
--- a/app/views/submissions_filters/_filter_button.html.erb
+++ b/app/views/submissions_filters/_filter_button.html.erb
@@ -9,31 +9,31 @@
   </label>
   <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right" style="min-width: 180px;">
     <li class="flex">
-      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
+      <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
         <%= svg_icon('calendar_check', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('completed_at') %></span>
       <% end %>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
+      <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
         <%= svg_icon('calendar', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('created_at') %></span>
       <% end %>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
+      <%= link_to submissions_filter_path('status', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
         <%= svg_icon('info_circle', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('status') %></span>
       <% end %>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
+      <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
         <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('folder') %></span>
       <% end %>
     </li>
     <li class="flex">
-      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
+      <%= link_to submissions_filter_path('author', query_params.merge(path: url_for)), data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
         <%= svg_icon('user', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('author') %></span>
       <% end %>
diff --git a/app/views/template_folders/show.html.erb b/app/views/template_folders/show.html.erb
index 56bda567c..abd43b214 100644
--- a/app/views/template_folders/show.html.erb
+++ b/app/views/template_folders/show.html.erb
@@ -51,7 +51,7 @@
             <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
           </span>
           <open-modal-mobile data-disabled="<%= !Docuseal.multitenant? %>" class="flex">
-            <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+            <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
               <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
               <span class="hidden md:block"><%= t('create') %></span>
             <% end %>
diff --git a/app/views/templates/_dropzone.html.erb b/app/views/templates/_dropzone.html.erb
index 5ddec4c5b..6737447d0 100644
--- a/app/views/templates/_dropzone.html.erb
+++ b/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>
diff --git a/app/views/templates/_submission.html.erb b/app/views/templates/_submission.html.erb
index 9262b14e7..4625b87f3 100644
--- a/app/views/templates/_submission.html.erb
+++ b/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>
diff --git a/app/views/templates/_template.html.erb b/app/views/templates/_template.html.erb
index b2f3c2754..936de7e85 100644
--- a/app/views/templates/_template.html.erb
+++ b/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>
diff --git a/app/views/templates/_title.html.erb b/app/views/templates/_title.html.erb
index ad6bf0dd9..16f4bdf49 100644
--- a/app/views/templates/_title.html.erb
+++ b/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>
diff --git a/app/views/templates/show.html.erb b/app/views/templates/show.html.erb
index 62c875da4..c7faec664 100644
--- a/app/views/templates/show.html.erb
+++ b/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 %>
diff --git a/app/views/templates_archived_submissions/index.html.erb b/app/views/templates_archived_submissions/index.html.erb
index 4fd0efa90..2f5456b0f 100644
--- a/app/views/templates_archived_submissions/index.html.erb
+++ b/app/views/templates_archived_submissions/index.html.erb
@@ -30,7 +30,7 @@
     <%= render 'submissions_filters/applied_filters', filter_params:, with_status: true, with_default_status: true %>
     <% unless turbo_native_app? %>
       <div class="hidden md:block shrink-0 md:order-first">
-        <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base h-10 min-h-10', data: { turbo_frame: 'modal' } do %>
+        <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base h-10 min-h-10', data: { turbo_frame: 'modal', native_modal: 'medium' } do %>
           <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
           <span class="hidden md:inline"><%= t('export') %></span>
         <% end %>
diff --git a/app/views/templates_dashboard/index.html.erb b/app/views/templates_dashboard/index.html.erb
index b50076b4a..65c121375 100644
--- a/app/views/templates_dashboard/index.html.erb
+++ b/app/views/templates_dashboard/index.html.erb
@@ -33,7 +33,7 @@
           <%= render 'templates/upload_button' %>
         </span>
         <open-modal-mobile data-disabled="<%= !Docuseal.multitenant? %>" class="flex">
-          <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+          <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal, native_modal: :medium } do %>
             <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
             <span class="hidden md:block"><%= t('create') %></span>
           <% end %>
diff --git a/app/views/templates_preferences/show.html.erb b/app/views/templates_preferences/show.html.erb
index 8f5c435bd..a6b2f8f7f 100644
--- a/app/views/templates_preferences/show.html.erb
+++ b/app/views/templates_preferences/show.html.erb
@@ -5,7 +5,7 @@
   <% options << [t('recipients'), 'recipients'] if show_recipients %>
   <% options << [safe_join([tag.span('API', class: 'md:hidden'), tag.span(t('api_and_embedding'), class: 'hidden md:inline')]), 'api'] if show_api %>
   <% if options.size > 1 %>
-    <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-3 block">
+    <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= 'mt-3' unless turbo_native_app? %>">
       <div class="join">
         <% options.each_with_index do |(label, value), index| %>
           <span>
diff --git a/app/views/templates_share_link/show.html.erb b/app/views/templates_share_link/show.html.erb
index 6dcb12332..fd45fef69 100644
--- a/app/views/templates_share_link/show.html.erb
+++ b/app/views/templates_share_link/show.html.erb
@@ -24,7 +24,9 @@
       <% end %>
       <div class="flex gap-2 mt-3">
         <div class="relative flex-grow">
-          <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug, host: form_link_host) %>" class="base-input w-full pr-10" autocomplete="off" readonly>
+          <%= content_tag(turbo_native_app? ? 'clipboard-copy' : 'div', class: 'block', data: { text: start_form_url(slug: @template.slug, host: form_link_host) }) do %>
+            <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug, host: form_link_host) %>" class="base-input w-full pr-10" autocomplete="off" readonly>
+          <% end %>
           <% if @template.variables_schema.blank? && !@template.preferences&.dig('require_email_2fa') && !@template.preferences&.dig('require_phone_2fa') %>
             <a href="<%= template_share_link_qr_path(@template) %>" target="_blank" rel="noopener" class="absolute top-1/2 -translate-y-1/2 right-2 flex items-center justify-center tooltip tooltip-no-touch text-base-content/70 hover:text-base-content bg-white rounded px-1 py-0.5" data-tip="<%= t('qr_code') %>" aria-label="<%= t('qr_code') %>">
               <%= svg_icon('qrcode', class: 'w-6 h-6') %>
diff --git a/config/locales/i18n.yml b/config/locales/i18n.yml
index 513b70320..8343e491e 100644
--- a/config/locales/i18n.yml
+++ b/config/locales/i18n.yml
@@ -507,7 +507,7 @@ en: &en
   upload_new_document: Upload New Document
   uploading: Uploading
   expired: Expired
-  sign_now: Sign now
+  sign_now: Sign Now
   archive: Archive
   archiving: Archiving
   restore: Restore