From dba50cd1bfbae066987c5da62426b06df820ddd5 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 30 Jul 2026 19:10:48 +0300
Subject: [PATCH] mobile fixes

---
 app/javascript/application.js                 | 16 ++++++++++++++
 app/javascript/template_builder/builder.vue   |  4 ++++
 .../_editor_toolbar.html.erb                  | 17 ++++++++-------
 app/views/shared/_classes.html.erb            |  2 +-
 app/views/shared/_navbar.html.erb             |  2 +-
 app/views/shared/_settings_nav.html.erb       |  6 +++---
 app/views/shared/_turbo_modal_large.html.erb  |  2 +-
 .../submissions/_send_email_base.html.erb     |  4 ++--
 app/views/templates/_template.html.erb        |  4 ++--
 app/views/templates/_title.html.erb           |  4 ++--
 app/views/templates/show.html.erb             | 20 +++++++++++-------
 config/locales/i18n.yml                       | 21 ++++++++++++-------
 12 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 9e14ff9b..6e8eec57 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -160,6 +160,7 @@ safeRegisterElement('history-back', HistoryBack)
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
     document.addEventListener('turbo:submit-end', this.onSubmit)
+    document.addEventListener('turbo:before-cache', this.onBeforeCache)
 
     this.appElem = document.createElement('div')
 
@@ -243,8 +244,14 @@ safeRegisterElement('template-builder', class extends HTMLElement {
     }
   }
 
+  onBeforeCache = () => {
+    this.app?.unmount()
+    this.appElem?.remove()
+  }
+
   disconnectedCallback () {
     document.removeEventListener('turbo:submit-end', this.onSubmit)
+    document.removeEventListener('turbo:before-cache', this.onBeforeCache)
 
     this.app?.unmount()
     this.appElem?.remove()
@@ -253,6 +260,8 @@ safeRegisterElement('template-builder', class extends HTMLElement {
 
 safeRegisterElement('import-list', class extends HTMLElement {
   connectedCallback () {
+    document.addEventListener('turbo:before-cache', this.onBeforeCache)
+
     this.appElem = document.createElement('div')
 
     this.app = createApp(ImportList, {
@@ -267,7 +276,14 @@ safeRegisterElement('import-list', class extends HTMLElement {
     this.appendChild(this.appElem)
   }
 
+  onBeforeCache = () => {
+    this.app?.unmount()
+    this.appElem?.remove()
+  }
+
   disconnectedCallback () {
+    document.removeEventListener('turbo:before-cache', this.onBeforeCache)
+
     this.app?.unmount()
     this.appElem?.remove()
   }
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 8dd2208f..fca220ac 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -281,6 +281,10 @@
             :href="`/templates/${template.id}`"
             class="base-button"
           >
+            <IconX
+              width="20"
+              class="md:hidden stroke-2"
+            />
             <span class="hidden md:inline">
               {{ t('back') }}
             </span>
diff --git a/app/views/personalization_settings/_editor_toolbar.html.erb b/app/views/personalization_settings/_editor_toolbar.html.erb
index d6c58698..4e6c4185 100644
--- a/app/views/personalization_settings/_editor_toolbar.html.erb
+++ b/app/views/personalization_settings/_editor_toolbar.html.erb
@@ -1,21 +1,21 @@
 <div class="flex items-center px-2 py-2 border-b" style="height: 42px;">
   <div class="flex items-center gap-1">
-    <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('bold') %> (Ctrl+B)">
+    <div class="tooltip tooltip-top tooltip-no-touch before:text-xs" data-tip="<%= t('bold') %> (Ctrl+B)">
       <button type="button" data-action="click:<%= editor_tag %>#bold" data-target="<%= editor_tag %>.boldButton" aria-label="<%= t('bold') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
         <%= svg_icon('bold', class: 'w-4 h-4') %>
       </button>
     </div>
-    <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('italic') %> (Ctrl+I)">
+    <div class="tooltip tooltip-top tooltip-no-touch before:text-xs" data-tip="<%= t('italic') %> (Ctrl+I)">
       <button type="button" data-action="click:<%= editor_tag %>#italic" data-target="<%= editor_tag %>.italicButton" aria-label="<%= t('italic') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
         <%= svg_icon('italic', class: 'w-4 h-4') %>
       </button>
     </div>
-    <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('underline') %> (Ctrl+U)">
+    <div class="tooltip tooltip-top tooltip-no-touch before:text-xs" data-tip="<%= t('underline') %> (Ctrl+U)">
       <button type="button" data-action="click:<%= editor_tag %>#underline" data-target="<%= editor_tag %>.underlineButton" aria-label="<%= t('underline') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
         <%= svg_icon('underline', class: 'w-4 h-4') %>
       </button>
     </div>
-    <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('link') %> (Ctrl+K)">
+    <div class="tooltip tooltip-top tooltip-no-touch before:text-xs" data-tip="<%= t('link') %> (Ctrl+K)">
       <button type="button" data-action="click:<%= editor_tag %>#linkSelection" data-target="<%= editor_tag %>.linkButton" aria-label="<%= t('link') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
         <%= svg_icon('link', class: 'w-4 h-4') %>
       </button>
@@ -23,12 +23,12 @@
   </div>
   <div class="mx-2 h-5 border-l border-base-content/20"></div>
   <div class="flex items-center gap-1">
-    <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('undo') %> (Ctrl+Z)">
+    <div class="tooltip tooltip-top tooltip-no-touch before:text-xs" data-tip="<%= t('undo') %> (Ctrl+Z)">
       <button type="button" data-action="click:<%= editor_tag %>#undo" data-target="<%= editor_tag %>.undoButton" aria-label="<%= t('undo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
         <%= svg_icon('arrow_back_up', class: 'w-4 h-4') %>
       </button>
     </div>
-    <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('redo') %> (Ctrl+Shift+Z)">
+    <div class="tooltip tooltip-top tooltip-no-touch before:text-xs" data-tip="<%= t('redo') %> (Ctrl+Shift+Z)">
       <button type="button" data-action="click:<%= editor_tag %>#redo" data-target="<%= editor_tag %>.redoButton" aria-label="<%= t('redo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
         <%= svg_icon('arrow_forward_up', class: 'w-4 h-4') %>
       </button>
@@ -37,8 +37,9 @@
   <% if local_assigns[:variables]&.any? %>
     <% variable_labels = { 'account.name' => t('variables.account_name'), 'submitter.link' => t('variables.submitter_link'), 'template.name' => t('variables.template_name'), 'submission.submitters' => t('variables.submission_submitters'), 'submission.link' => t('variables.submission_link'), 'documents.link' => t('variables.documents_link') } %>
     <div class="dropdown dropdown-end ml-auto">
-      <label tabindex="0" class="flex items-center gap-1 text-sm px-2 py-1 rounded hover:bg-base-200 cursor-pointer">
-        <%= t('add_variable') %>
+      <label tabindex="0" class="flex items-center gap-1 text-sm px-2 py-1 rounded hover:bg-base-200 cursor-pointer whitespace-nowrap">
+        <span class="hidden sm:inline"><%= t('add_variable') %></span>
+        <span class="sm:hidden"><%= t('variable') %></span>
         <%= svg_icon('chevron_down', class: 'w-3.5 h-3.5') %>
       </label>
       <div tabindex="0" class="dropdown-content right-0 top-full mt-1 p-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50">
diff --git a/app/views/shared/_classes.html.erb b/app/views/shared/_classes.html.erb
index f4858dca..6a2b14a5 100644
--- a/app/views/shared/_classes.html.erb
+++ b/app/views/shared/_classes.html.erb
@@ -1 +1 @@
-<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30 order-none order-1 order-2 order-3 order-4 order-5' %>
+<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30 order-none order-1 order-2 order-3 order-4 order-5 lg:inline lg:hidden' %>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 84536d97..6725711e 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -30,7 +30,7 @@
         <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[160px] text-right">
           <li class="md:hidden">
             <%= link_to settings_path, class: 'flex items-center' do %>
-              <%= svg_icon('settings', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+              <%= svg_icon('adjustments', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
               <span class="mr-1"><%= t('settings') %></span>
             <% end %>
           </li>
diff --git a/app/views/shared/_settings_nav.html.erb b/app/views/shared/_settings_nav.html.erb
index 52916ec4..f091df45 100644
--- a/app/views/shared/_settings_nav.html.erb
+++ b/app/views/shared/_settings_nav.html.erb
@@ -132,10 +132,10 @@
     </menu-active>
     <% if Docuseal.multitenant? || cannot?(:manage, :tenants) %>
       <div id="support_channels" class="mx-4 border-t border-base-300 <%= 'hidden md:block' unless expanded %>">
-        <div class="text-sm text-center mt-3">
+        <div class="text-sm mt-3">
           <%= t('need_help_ask_a_question_') %>
         </div>
-        <div class="flex justify-center mt-3 space-x-3">
+        <div class="flex mt-3 space-x-3">
           <div class="tooltip tooltip-no-touch" data-tip="GitHub">
             <a href="<%= Docuseal::GITHUB_URL %>" target="_blank" class="btn btn-circle btn-primary btn-md">
               <%= svg_icon('brand_github', class: 'w-8 h-8') %>
@@ -154,7 +154,7 @@
             </div>
           <% end %>
         </div>
-        <a href="mailto:<%= Docuseal::SUPPORT_EMAIL %>" target="_blank" class="w-full block mt-4 underline text-center">
+        <a href="mailto:<%= Docuseal::SUPPORT_EMAIL %>" target="_blank" class="w-full block mt-4 underline">
           <%= Docuseal::SUPPORT_EMAIL %>
         </a>
         <% if Docuseal.version.present? && !Docuseal.multitenant? && can?(:manage, EncryptedConfig) %>
diff --git a/app/views/shared/_turbo_modal_large.html.erb b/app/views/shared/_turbo_modal_large.html.erb
index 4c42fe56..0505b51e 100644
--- a/app/views/shared/_turbo_modal_large.html.erb
+++ b/app/views/shared/_turbo_modal_large.html.erb
@@ -24,7 +24,7 @@
         <%= local_assigns[:title] %>
       </span>
       <history-back>
-        <a href="#" class="text-xl">&times;</a>
+        <a href="#" class="text-xl block py-2 px-5 -my-2 -mr-5">&times;</a>
       </history-back>
     </div>
   <% end %>
diff --git a/app/views/submissions/_send_email_base.html.erb b/app/views/submissions/_send_email_base.html.erb
index 9830344d..4e640d70 100644
--- a/app/views/submissions/_send_email_base.html.erb
+++ b/app/views/submissions/_send_email_base.html.erb
@@ -45,8 +45,8 @@
 <% default_subject = template&.preferences&.dig('request_email_subject').presence || config.value['subject'] %>
 <% default_body = template&.preferences&.dig('request_email_body').presence || config_body %>
 <% is_edit_viewer = local_assigns[:submitter] && local_assigns[:viewer_submitter_uuids].include?(local_assigns[:submitter].uuid) %>
-<div id="<%= message_field_id %>" class="card card-compact bg-base-300/40 hidden">
-  <div class="card-body">
+<div id="<%= message_field_id %>" class="relative flex flex-col rounded-2xl md:bg-base-300/40 hidden">
+  <div class="flex flex-auto flex-col gap-2 md:text-sm md:p-4">
     <%= tag.input id: toggle_uuid = SecureRandom.uuid, value: '1', name: 'request_email_per_submitter', class: 'peer', type: 'checkbox', hidden: true, checked: local_assigns[:message_per_submitter] != false && template_submitters.size < 11 && template&.preferences&.dig('submitters').to_a.size > 1 %>
     <% if local_assigns[:viewer_submitter_uuids].present? && local_assigns[:submitter].blank? %>
       <% (template_submitters.pluck('uuid') - local_assigns[:viewer_submitter_uuids].to_a).each do |signer_uuid| %>
diff --git a/app/views/templates/_template.html.erb b/app/views/templates/_template.html.erb
index 79985645..1eac20ca 100644
--- a/app/views/templates/_template.html.erb
+++ b/app/views/templates/_template.html.erb
@@ -15,8 +15,8 @@
         <% end %>
       </p>
       <p class="flex text-xs text-base-content/60">
-        <span class="flex items-center space-x-1 w-1/2">
-          <%= svg_icon('calendar', class: 'w-4 h-4') %>
+        <span class="flex items-center space-x-1 w-1/2 whitespace-nowrap">
+          <%= svg_icon('calendar', class: 'w-4 h-4 flex-shrink-0') %>
           <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
         </span>
         <% if local_assigns[:with_folder] %>
diff --git a/app/views/templates/_title.html.erb b/app/views/templates/_title.html.erb
index d420becf..d9446ebd 100644
--- a/app/views/templates/_title.html.erb
+++ b/app/views/templates/_title.html.erb
@@ -20,7 +20,7 @@
               </span>
             </a>
             <% if can?(:update, template) %>
-              <span class="pl-1 tooltip tooltip-right md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="<%= t('move') %>">
+              <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">
                   <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
                 </a>
@@ -44,7 +44,7 @@
     <% if !template.archived_at? %>
       <div class="flex items-center space-x-2">
         <% if can?(:update, template) %>
-          <div class="tooltip hidden md:block" data-tip="<%= t('preferences') %>">
+          <div class="tooltip tooltip-no-touch hidden md:block" data-tip="<%= t('preferences') %>">
             <%= link_to template_preferences_path(template), class: 'btn border border-base-200 bg-base-200 hover:bg-base-300 hover:border-base-300 btn-sm flex-1 hidden md:flex', data: { turbo_frame: :modal } do %>
               <span class="flex items-center justify-center space-x-2">
                 <%= svg_icon('adjustments_horizontal', class: 'w-6 h-6') %>
diff --git a/app/views/templates/show.html.erb b/app/views/templates/show.html.erb
index 500b11f0..abaab0e8 100644
--- a/app/views/templates/show.html.erb
+++ b/app/views/templates/show.html.erb
@@ -91,10 +91,12 @@
             <p><%= t('send_an_invitation_to_fill_and_complete_the_form') %></p>
             <div class="space-y-2 flex flex-col">
               <% if can?(:create, Submission) %>
-                <%= link_to new_template_submission_path(@template, with_link: true), id: 'send_to_recipients_button', class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
-                  <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-                  <span class="mr-1"><%= t('send_to_recipients') %></span>
-                <% end %>
+                <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 %>
+                    <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+                    <span class="mr-1"><%= t('send_to_recipients') %></span>
+                  <% end %>
+                </open-modal-mobile>
               <% end %>
               <% if Templates.filter_undefined_submitters(@template.submitters).size == 1 && @template.variables_schema.blank? %>
                 <%= button_to start_form_path(@template.slug), params: { selfsign: true }, method: :put, class: 'white-button w-full', form: { style: 'display: inline', target: '_blank', data: { turbo: false } } do %>
@@ -102,10 +104,12 @@
                   <span class="mr-1"><%= t('sign_it_yourself') %></span>
                 <% end %>
               <% else %>
-                <%= link_to new_template_submission_path(@template, selfsign: true), id: 'sign_yourself_button', class: 'white-button mt-6', data: { turbo_frame: 'modal' } do %>
-                  <%= svg_icon('writing', class: 'w-6 h-6') %>
-                  <span class="mr-1"><%= t('sign_it_yourself') %></span>
-                <% end %>
+                <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 %>
+                    <%= svg_icon('writing', class: 'w-6 h-6') %>
+                    <span class="mr-1"><%= t('sign_it_yourself') %></span>
+                  <% end %>
+                </open-modal-mobile>
               <% end %>
             </div>
           </div>
diff --git a/config/locales/i18n.yml b/config/locales/i18n.yml
index 19e11f72..776aea52 100644
--- a/config/locales/i18n.yml
+++ b/config/locales/i18n.yml
@@ -473,7 +473,7 @@ en: &en
   back_to_active: Back to Active
   submissions: Submissions
   templates: Templates
-  document_templates_html: <span class="hidden md:inline">Document</span> Templates
+  document_templates_html: <span class="hidden lg:inline">Document</span> Templates
   archived: Archived
   search: Search
   submissions_not_found: Submissions not Found
@@ -965,6 +965,7 @@ en: &en
   undo: Undo
   redo: Redo
   add_variable: Add variable
+  variable: Variable
   enter_a_url_or_variable_name: Enter a URL or variable name
   new_token: New token
   token: Token
@@ -1572,7 +1573,7 @@ es: &es
   back_to_active: Volver a activo
   submissions: Envíos
   templates: Plantillas
-  document_templates_html: Plantillas <span class="hidden md:inline">de documento</span>
+  document_templates_html: Plantillas <span class="hidden lg:inline">de documento</span>
   archived: Archivado
   search: Buscar
   submissions_not_found: Envíos no encontrados
@@ -2061,6 +2062,7 @@ es: &es
   undo: Deshacer
   redo: Rehacer
   add_variable: Agregar variable
+  variable: Variable
   enter_a_url_or_variable_name: Ingrese una URL o nombre de variable
   new_token: Nuevo token
   token: Token
@@ -2668,7 +2670,7 @@ it: &it
   back_to_active: Torna attivo
   submissions: Invii
   templates: Modelli
-  document_templates_html: Modelli <span class="hidden md:inline">di documento</span>
+  document_templates_html: Modelli <span class="hidden lg:inline">di documento</span>
   archived: Archiviato
   search: Cerca
   submissions_not_found: Invii non trovati
@@ -3157,6 +3159,7 @@ it: &it
   undo: Annulla
   redo: Ripeti
   add_variable: Aggiungi variabile
+  variable: Variabile
   enter_a_url_or_variable_name: Inserisci un URL o nome variabile
   new_token: Nuovo token
   token: Token
@@ -3764,7 +3767,7 @@ fr: &fr
   back_to_active: Retour aux actifs
   submissions: Soumissions
   templates: Modèles
-  document_templates_html: Modèles <span class="hidden md:inline">de documents</span>
+  document_templates_html: Modèles <span class="hidden lg:inline">de documents</span>
   archived: Archivé
   search: Rechercher
   submissions_not_found: Soumissions introuvables
@@ -4250,6 +4253,7 @@ fr: &fr
   undo: Annuler
   redo: Rétablir
   add_variable: Ajouter une variable
+  variable: Variable
   enter_a_url_or_variable_name: Entrez une URL ou un nom de variable
   new_token: Nouveau jeton
   token: Jeton
@@ -4857,7 +4861,7 @@ pt: &pt
   back_to_active: Voltar para ativo
   submissions: Submissões
   templates: Modelos
-  document_templates_html: Modelos <span class="hidden md:inline">de documento</span>
+  document_templates_html: Modelos <span class="hidden lg:inline">de documento</span>
   archived: Arquivado
   search: Buscar
   submissions_not_found: Submissões não encontradas
@@ -5346,6 +5350,7 @@ pt: &pt
   undo: Desfazer
   redo: Refazer
   add_variable: Adicionar variável
+  variable: Variável
   enter_a_url_or_variable_name: Digite uma URL ou nome de variável
   new_token: Novo token
   token: Token
@@ -5953,7 +5958,7 @@ de: &de
   back_to_active: Zurück zu Aktiv
   submissions: Einreichungen
   templates: Vorlagen
-  document_templates_html: <span class="md:hidden">Vorlagen</span><span class="hidden md:inline">Dokumentvorlagen</span>
+  document_templates_html: <span class="lg:hidden">Vorlagen</span><span class="hidden lg:inline">Dokumentvorlagen</span>
   archived: Archiviert
   search: Suchen
   submissions_not_found: Einreichungen nicht gefunden
@@ -6442,6 +6447,7 @@ de: &de
   undo: Rückgängig
   redo: Wiederholen
   add_variable: Variable hinzufügen
+  variable: Variable
   enter_a_url_or_variable_name: Geben Sie eine URL oder einen Variablennamen ein
   new_token: Neues Token
   token: Token
@@ -7454,7 +7460,7 @@ nl: &nl
   back_to_active: Terug naar Actief
   submissions: Inzendingen
   templates: Sjablonen
-  document_templates_html: <span class="md:hidden">Sjablonen</span><span class="hidden md:inline">Documentsjablonen</span>
+  document_templates_html: <span class="lg:hidden">Sjablonen</span><span class="hidden lg:inline">Documentsjablonen</span>
   archived: Gearchiveerd
   search: Zoeken
   submissions_not_found: Geen inzendingen gevonden
@@ -7939,6 +7945,7 @@ nl: &nl
   undo: Ongedaan maken
   redo: Opnieuw
   add_variable: Variabele toevoegen
+  variable: Variabele
   enter_a_url_or_variable_name: Voer een URL of variabelenaam in
   new_token: Nieuw token
   token: Token