From f9c12b9d7848036ad6594f138ce1882862c4243d Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 29 Oct 2026 11:55:33 +0200
Subject: [PATCH] mobile fixes

---
 app/controllers/submissions_export_controller.rb      | 4 +++-
 app/controllers/template_folders_controller.rb        | 4 +++-
 app/controllers/templates_clone_controller.rb         | 2 ++
 app/controllers/templates_folders_controller.rb       | 4 +++-
 app/controllers/user_initials_controller.rb           | 4 +++-
 app/controllers/user_signatures_controller.rb         | 4 +++-
 app/controllers/users_controller.rb                   | 8 ++++++--
 app/javascript/elements/signature_form.js             | 2 +-
 app/javascript/template_builder/conditions_modal.vue  | 6 +++---
 app/javascript/template_builder/description_modal.vue | 6 +++---
 app/javascript/template_builder/font_modal.vue        | 6 +++---
 app/javascript/template_builder/formula_modal.vue     | 6 +++---
 app/javascript/template_builder/revisions_modal.vue   | 4 ++--
 app/views/shared/_templates_order_select.html.erb     | 8 +++++---
 app/views/submissions_export/new.html.erb             | 2 +-
 app/views/submissions_filters/completed_at.html.erb   | 4 ++--
 app/views/submissions_filters/created_at.html.erb     | 4 ++--
 app/views/template_folders/edit.html.erb              | 4 ++--
 app/views/templates_clone/_form.html.erb              | 9 +++++----
 app/views/templates_folders/edit.html.erb             | 4 ++--
 app/views/user_initials/edit.html.erb                 | 6 +++---
 app/views/user_signatures/edit.html.erb               | 6 +++---
 app/views/users/_form.html.erb                        | 2 +-
 23 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/app/controllers/submissions_export_controller.rb b/app/controllers/submissions_export_controller.rb
index d199e5850..7a42d6a5c 100644
--- a/app/controllers/submissions_export_controller.rb
+++ b/app/controllers/submissions_export_controller.rb
@@ -25,5 +25,7 @@ class SubmissionsExportController < ApplicationController
     end
   end
 
-  def new; end
+  def new
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 end
diff --git a/app/controllers/template_folders_controller.rb b/app/controllers/template_folders_controller.rb
index 17fbc806f..8b24d2020 100644
--- a/app/controllers/template_folders_controller.rb
+++ b/app/controllers/template_folders_controller.rb
@@ -41,7 +41,9 @@ class TemplateFoldersController < ApplicationController
     render_infinite_scroll(@pagy, @templates, @template_folders) if turbo_infinite_scroll?
   end
 
-  def edit; end
+  def edit
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 
   def update
     if @template_folder != current_account.default_template_folder &&
diff --git a/app/controllers/templates_clone_controller.rb b/app/controllers/templates_clone_controller.rb
index d001087ff..8d5f62546 100644
--- a/app/controllers/templates_clone_controller.rb
+++ b/app/controllers/templates_clone_controller.rb
@@ -7,6 +7,8 @@ class TemplatesCloneController < ApplicationController
     authorize!(:create, Template)
 
     @template = Template.new(name: "#{@base_template.name} (#{I18n.t('clone')})")
+
+    render layout: turbo_native_android? ? 'plain' : true
   end
 
   def create
diff --git a/app/controllers/templates_folders_controller.rb b/app/controllers/templates_folders_controller.rb
index 05ee62d84..6f22669b0 100644
--- a/app/controllers/templates_folders_controller.rb
+++ b/app/controllers/templates_folders_controller.rb
@@ -3,7 +3,9 @@
 class TemplatesFoldersController < ApplicationController
   load_and_authorize_resource :template
 
-  def edit; end
+  def edit
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 
   def update
     authorize!(:update, @template)
diff --git a/app/controllers/user_initials_controller.rb b/app/controllers/user_initials_controller.rb
index 29562e642..1306444cc 100644
--- a/app/controllers/user_initials_controller.rb
+++ b/app/controllers/user_initials_controller.rb
@@ -4,7 +4,9 @@ class UserInitialsController < ApplicationController
   before_action :load_user_config
   authorize_resource :user_config
 
-  def edit; end
+  def edit
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 
   def update
     file = params[:file]
diff --git a/app/controllers/user_signatures_controller.rb b/app/controllers/user_signatures_controller.rb
index da2974eae..353e26092 100644
--- a/app/controllers/user_signatures_controller.rb
+++ b/app/controllers/user_signatures_controller.rb
@@ -4,7 +4,9 @@ class UserSignaturesController < ApplicationController
   before_action :load_user_config
   authorize_resource :user_config
 
-  def edit; end
+  def edit
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 
   def update
     file = params[:file]
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index d2371aa55..6298c0815 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -31,9 +31,13 @@ class UsersController < ApplicationController
     end
   end
 
-  def new; end
+  def new
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 
-  def edit; end
+  def edit
+    render layout: turbo_native_android? ? 'plain' : true
+  end
 
   def create
     existing_user = User.accessible_by(current_ability).find_by(email: @user.email)
diff --git a/app/javascript/elements/signature_form.js b/app/javascript/elements/signature_form.js
index 845a6b6cf..f3129167e 100644
--- a/app/javascript/elements/signature_form.js
+++ b/app/javascript/elements/signature_form.js
@@ -55,7 +55,7 @@ export default targetable(class extends HTMLElement {
 
     this.input.files = dataTransfer.files
 
-    if (this.input.webkitEntries.length) {
+    if (this.input.webkitEntries?.length) {
       this.input.dataset.file = `${dataTransfer.files[0].name}`
     }
 
diff --git a/app/javascript/template_builder/conditions_modal.vue b/app/javascript/template_builder/conditions_modal.vue
index 6ba5fe8cb..c625f43e5 100644
--- a/app/javascript/template_builder/conditions_modal.vue
+++ b/app/javascript/template_builder/conditions_modal.vue
@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -33,7 +33,7 @@
           >{{ t('available_in_pro') }}</a>
         </div>
         <form @submit.prevent="validateSaveAndClose">
-          <div class="my-4">
+          <div :class="inline && nativePlatform === 'android' ? 'mt-1 mb-4' : 'my-4'">
             <div
               v-for="(condition, cindex) in conditions"
               :key="cindex"
@@ -168,7 +168,7 @@
 <script>
 export default {
   name: 'ConditionModal',
-  inject: ['t', 'template', 'withConditions'],
+  inject: ['t', 'template', 'withConditions', 'nativePlatform'],
   props: {
     item: {
       type: Object,
diff --git a/app/javascript/template_builder/description_modal.vue b/app/javascript/template_builder/description_modal.vue
index 14bd31c57..bea1a78f5 100644
--- a/app/javascript/template_builder/description_modal.vue
+++ b/app/javascript/template_builder/description_modal.vue
@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -27,7 +27,7 @@
             <div>
               <label
                 dir="auto"
-                class="label text-sm"
+                :class="['label text-sm', { 'pt-0 mt-1': inline && nativePlatform === 'android' }]"
                 for="description_field"
               >
                 {{ t('description') }}
@@ -71,7 +71,7 @@
 <script>
 export default {
   name: 'DescriptionModal',
-  inject: ['t', 'template'],
+  inject: ['t', 'template', 'nativePlatform'],
   props: {
     field: {
       type: Object,
diff --git a/app/javascript/template_builder/font_modal.vue b/app/javascript/template_builder/font_modal.vue
index afd32f67a..becc24cc2 100644
--- a/app/javascript/template_builder/font_modal.vue
+++ b/app/javascript/template_builder/font_modal.vue
@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -21,7 +21,7 @@
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
-      <div class="mt-4">
+      <div :class="inline && nativePlatform === 'android' ? 'mt-1' : 'mt-4'">
         <div>
           <div class="flex flex-wrap items-center gap-1.5">
             <span>
@@ -200,7 +200,7 @@ export default {
   components: {
     IconChevronDown
   },
-  inject: ['t', 'template'],
+  inject: ['t', 'template', 'nativePlatform'],
   props: {
     field: {
       type: Object,
diff --git a/app/javascript/template_builder/formula_modal.vue b/app/javascript/template_builder/formula_modal.vue
index e1dafff98..53ddb12ac 100644
--- a/app/javascript/template_builder/formula_modal.vue
+++ b/app/javascript/template_builder/formula_modal.vue
@@ -7,7 +7,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"
@@ -32,7 +32,7 @@
             class="link"
           >{{ t('available_in_pro') }}</a>
         </div>
-        <div class="flex flex-wrap mb-2 gap-y-1 pt-1">
+        <div :class="['flex flex-wrap mb-2 gap-y-1', inline && nativePlatform === 'android' ? 'mt-1' : 'pt-1']">
           <button
             v-for="f in fields"
             :key="f.uuid"
@@ -152,7 +152,7 @@ export default {
     IconCodePlus,
     IconMathFunction
   },
-  inject: ['t', 'template', 'withFormula'],
+  inject: ['t', 'template', 'withFormula', 'nativePlatform'],
   props: {
     field: {
       type: Object,
diff --git a/app/javascript/template_builder/revisions_modal.vue b/app/javascript/template_builder/revisions_modal.vue
index ffe33ac3b..4b3c3051b 100644
--- a/app/javascript/template_builder/revisions_modal.vue
+++ b/app/javascript/template_builder/revisions_modal.vue
@@ -5,7 +5,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div :class="inline ? 'px-4 pt-3 pb-6' : 'modal-box pt-4 pb-6 mt-20 w-full'">
+    <div :class="inline ? (nativePlatform === 'android' ? 'px-4 pt-1.5 pb-6' : 'px-4 pt-3 pb-6') : 'modal-box pt-4 pb-6 mt-20 w-full'">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-3 font-medium"
@@ -63,7 +63,7 @@ import { IconUser, IconInnerShadowTop } from '@tabler/icons-vue'
 export default {
   name: 'RevisionsModal',
   components: { IconUser, IconInnerShadowTop },
-  inject: ['t', 'baseFetch'],
+  inject: ['t', 'baseFetch', 'nativePlatform'],
   props: {
     template: {
       type: Object,
diff --git a/app/views/shared/_templates_order_select.html.erb b/app/views/shared/_templates_order_select.html.erb
index 7aba2e217..bc5f26ec3 100644
--- a/app/views/shared/_templates_order_select.html.erb
+++ b/app/views/shared/_templates_order_select.html.erb
@@ -1,7 +1,9 @@
 <form action="<%= url_for %>" method="get" class="dropdown dropdown-top hidden md:inline">
-  <label tabindex="0" class="btn btn-sm h-10">
-    <%= svg_icon('arrow_sort', class: 'w-5 h-5') %>
-  </label>
+  <% unless turbo_native_app? %>
+    <label tabindex="0" class="btn btn-sm h-10">
+      <%= svg_icon('arrow_sort', class: 'w-5 h-5') %>
+    </label>
+  <% end %>
   <ul tabindex="0" class="dropdown-content z-[10] menu p-2 shadow bg-base-100 rounded-box mb-1 min-w-48">
     <native-action class="contents" data-menu="<%= t('sort_by') %>" data-menu-icon="arrow_sort" data-icon="sort_descending_numbers" data-selected="<%= selected_order == 'created_at' %>">
       <toggle-cookies data-value="created_at" data-key="dashboard_templates_order">
diff --git a/app/views/submissions_export/new.html.erb b/app/views/submissions_export/new.html.erb
index 2c1c9d290..52e25fdd1 100644
--- a/app/views/submissions_export/new.html.erb
+++ b/app/views/submissions_export/new.html.erb
@@ -1,6 +1,6 @@
 <% filter_params = params.permit(:q, :archived, *Submissions::Filter::ALLOWED_PARAMS) %>
 <%= render 'shared/turbo_modal', title: t('export'), close_after_submit: false do %>
-  <div class="space-y-2 <%= 'mt-1.5' if turbo_native_android? %>">
+  <div class="space-y-2 <%= 'mt-1.5 px-4' if turbo_native_android? %>">
     <%= button_to template_submissions_export_index_path(@template), params: { format: :xlsx, **filter_params }, method: :get, data: { turbo_frame: :_top } do %>
       <div class="flex items-center p-4 text-left rounded-2xl border border-neutral-300 hover:cursor-pointer hover:bg-neutral hover:text-gray-300">
         <div class="enabled">
diff --git a/app/views/submissions_filters/completed_at.html.erb b/app/views/submissions_filters/completed_at.html.erb
index 47b8fed42..b69ac97b6 100644
--- a/app/views/submissions_filters/completed_at.html.erb
+++ b/app/views/submissions_filters/completed_at.html.erb
@@ -3,11 +3,11 @@
     <div class="flex flex-col md:flex-row gap-2">
       <div class="form-control w-full">
         <%= label_tag 'completed_at_from', t('from'), for: 'date_from', class: 'label text-sm' %>
-        <%= date_field_tag 'completed_at_from', params[:completed_at_from], id: 'date_from', class: 'base-input !h-10 w-full', autocomplete: 'off' %>
+        <%= date_field_tag 'completed_at_from', params[:completed_at_from], id: 'date_from', class: "base-input !h-10 #{'w-full' if turbo_native_android?}", autocomplete: 'off' %>
       </div>
       <div class="form-control w-full">
         <%= label_tag 'completed_at_to', t('to'), for: 'date_to', class: 'label text-sm' %>
-        <%= date_field_tag 'completed_at_to', params[:completed_at_to], id: 'date_to', class: 'base-input !h-10 w-full', autocomplete: 'off' %>
+        <%= date_field_tag 'completed_at_to', params[:completed_at_to], id: 'date_to', class: "base-input !h-10 #{'w-full' if turbo_native_android?}", autocomplete: 'off' %>
       </div>
     </div>
     <%= render 'date_buttons' %>
diff --git a/app/views/submissions_filters/created_at.html.erb b/app/views/submissions_filters/created_at.html.erb
index 6b4d58566..059c3dce6 100644
--- a/app/views/submissions_filters/created_at.html.erb
+++ b/app/views/submissions_filters/created_at.html.erb
@@ -3,11 +3,11 @@
     <div class="flex flex-col md:flex-row gap-2">
       <div class="form-control w-full">
         <%= label_tag 'created_at_from', t('from'), for: 'date_from', class: 'label text-sm' %>
-        <%= date_field_tag 'created_at_from', params[:created_at_from], id: 'date_from', class: 'base-input !h-10 w-full', autocomplete: 'off' %>
+        <%= date_field_tag 'created_at_from', params[:created_at_from], id: 'date_from', class: "base-input !h-10 #{'w-full' if turbo_native_android?}", autocomplete: 'off' %>
       </div>
       <div class="form-control w-full">
         <%= label_tag 'created_at_to', t('to'), for: 'date_to', class: 'label text-sm' %>
-        <%= date_field_tag 'created_at_to', params[:created_at_to], id: 'date_to', class: 'base-input !h-10 w-full', autocomplete: 'off' %>
+        <%= date_field_tag 'created_at_to', params[:created_at_to], id: 'date_to', class: "base-input !h-10 #{'w-full' if turbo_native_android?}", autocomplete: 'off' %>
       </div>
     </div>
     <%= render 'date_buttons' %>
diff --git a/app/views/template_folders/edit.html.erb b/app/views/template_folders/edit.html.erb
index 5ecb3a0d3..4b8cbbf5d 100644
--- a/app/views/template_folders/edit.html.erb
+++ b/app/views/template_folders/edit.html.erb
@@ -1,6 +1,6 @@
 <%= render 'shared/turbo_modal', title: t('rename_folder') do %>
-  <%= form_for @template_folder, url: folder_path(@template_folder), data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
-    <div class="form-control my-6">
+  <%= form_for @template_folder, url: folder_path(@template_folder), data: { turbo_frame: :_top }, html: { autocomplete: :off, class: ('px-4' if turbo_native_android?) } do |f| %>
+    <div class="form-control <%= turbo_native_android? ? 'mt-1.5 mb-6' : 'my-6' %>">
       <%= f.text_field :name, required: true, placeholder: "#{t('folder_name')}...", class: 'base-input w-full', autofocus: true, dir: 'auto' %>
     </div>
     <div class="form-control">
diff --git a/app/views/templates_clone/_form.html.erb b/app/views/templates_clone/_form.html.erb
index b2fb88b50..ebb320584 100644
--- a/app/views/templates_clone/_form.html.erb
+++ b/app/views/templates_clone/_form.html.erb
@@ -1,11 +1,12 @@
-<%= form_for @template, url: template_clone_index_path(@base_template), data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
+<%= form_for @template, url: template_clone_index_path(@base_template), data: { turbo_frame: :_top }, html: { autocomplete: :off, class: ('px-4' if turbo_native_android?) } do |f| %>
   <% accounts = Account.accessible_by(true_ability).where.not(id: true_user.account.testing_accounts).where(User.where(User.arel_table[:account_id].eq(Account.arel_table[:id])).arel.exists).active %>
-  <% if (can?(:manage, :tenants) || true_user != current_user) && accounts.where.not(id: current_account.id).exists? %>
-    <div class="form-control -mb-2 mt-2">
+  <% with_accounts = (can?(:manage, :tenants) || true_user != current_user) && accounts.where.not(id: current_account.id).exists? %>
+  <% if with_accounts %>
+    <div class="form-control -mb-2 <%= turbo_native_android? ? 'mt-1.5' : 'mt-2' %>">
       <%= select_tag :account_id, options_for_select([current_account, *accounts.order(:name)].uniq.map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
     </div>
   <% end %>
-  <div class="form-control mt-4">
+  <div class="form-control <%= turbo_native_android? && !with_accounts ? 'mt-1.5' : 'mt-4' %>">
     <%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
   </div>
   <div class="mt-3 mb-4 flex items-center justify-between">
diff --git a/app/views/templates_folders/edit.html.erb b/app/views/templates_folders/edit.html.erb
index c28da2ac4..26bd1643f 100644
--- a/app/views/templates_folders/edit.html.erb
+++ b/app/views/templates_folders/edit.html.erb
@@ -1,7 +1,7 @@
 <% with_subfolder = @template.folder.name != TemplateFolder::DEFAULT_NAME && params[:subfolder] != 'false' %>
 <%= render 'shared/turbo_modal', title: t('move_into_folder') do %>
   <% if with_subfolder %>
-    <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { id: 'subfolder_form', autocomplete: :off } do |f| %>
+    <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { id: 'subfolder_form', autocomplete: :off, class: ('px-4' if turbo_native_android?) } do |f| %>
       <%= f.hidden_field :parent_name, value: @template.folder.parent_folder&.name || @template.folder.name %>
       <toggle-visible data-element-ids="<%= %w[folder_form subfolder_form].to_json %>" class="block relative" data-focus-id="name">
         <div class="flex items-center justify-between mb-2.5">
@@ -25,7 +25,7 @@
       </div>
     <% end %>
   <% end %>
-  <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { id: 'folder_form', autocomplete: :off, class: "mt-6 #{'hidden' if with_subfolder}" } do |f| %>
+  <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { id: 'folder_form', autocomplete: :off, class: "#{turbo_native_android? ? 'mt-1.5 px-4' : 'mt-6'} #{'hidden' if with_subfolder}" } do |f| %>
     <div class="form-control mb-6">
       <folder-autocomplete class="block" data-submit-on-select="true" data-enabled="<%= params[:autocomplete] != 'false' %>">
         <%= f.text_field :name, required: true, placeholder: "#{t('new_folder_name')}...", class: 'base-input w-full', autofocus: true %>
diff --git a/app/views/user_initials/edit.html.erb b/app/views/user_initials/edit.html.erb
index feef01891..ee693fb3b 100644
--- a/app/views/user_initials/edit.html.erb
+++ b/app/views/user_initials/edit.html.erb
@@ -1,6 +1,6 @@
 <%= render 'shared/turbo_modal', title: t('update_initials') do %>
   <% options = [[t('draw'), 'draw'], [t('upload'), 'upload']] %>
-  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= 'mt-4' unless turbo_native_app? %>">
+  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= turbo_native_app? ? ('mt-1.5' if turbo_native_android?) : 'mt-4' %>">
     <div class="join">
       <% options.each_with_index do |(label, value), index| %>
         <span>
@@ -12,7 +12,7 @@
       <% end %>
     </div>
   </toggle-visible>
-  <div id="draw" class="mt-3">
+  <div id="draw" class="mt-3 <%= 'px-4' if turbo_native_android? %>">
     <%= form_for @user_config, url: user_initials_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
       <signature-form class="relative block">
         <a class="absolute top-1 right-1 link text-sm" data-target="signature-form.clear" href="#"><%= t('clear') %></a>
@@ -24,7 +24,7 @@
       </signature-form>
     <% end %>
   </div>
-  <div id="upload" class="hidden mt-3">
+  <div id="upload" class="hidden mt-3 <%= 'px-4' if turbo_native_android? %>">
     <%= form_for @user_config, url: user_initials_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
       <file-dropzone data-submit-on-upload="true" class="w-full">
         <label for="file" class="w-full block h-32 relative bg-base-200 hover:bg-base-200/70 rounded-md border border-base-content border-dashed">
diff --git a/app/views/user_signatures/edit.html.erb b/app/views/user_signatures/edit.html.erb
index 1c91065d6..9421cb0c5 100644
--- a/app/views/user_signatures/edit.html.erb
+++ b/app/views/user_signatures/edit.html.erb
@@ -1,6 +1,6 @@
 <%= render 'shared/turbo_modal', title: t('update_signature') do %>
   <% options = [[t('draw'), 'draw'], [t('upload'), 'upload']] %>
-  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= 'mt-4' unless turbo_native_app? %>">
+  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center block <%= turbo_native_app? ? ('mt-1.5' if turbo_native_android?) : 'mt-4' %>">
     <div class="join">
       <% options.each_with_index do |(label, value), index| %>
         <span>
@@ -12,7 +12,7 @@
       <% end %>
     </div>
   </toggle-visible>
-  <div id="draw" class="mt-3">
+  <div id="draw" class="mt-3 <%= 'px-4' if turbo_native_android? %>">
     <%= form_for @user_config, url: user_signature_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
       <signature-form class="relative block">
         <a class="absolute top-1 right-1 link text-sm" data-target="signature-form.clear" href="#"><%= t('clear') %></a>
@@ -24,7 +24,7 @@
       </signature-form>
     <% end %>
   </div>
-  <div id="upload" class="hidden mt-3">
+  <div id="upload" class="hidden mt-3 <%= 'px-4' if turbo_native_android? %>">
     <%= form_for @user_config, url: user_signature_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
       <file-dropzone data-submit-on-upload="true" class="w-full">
         <label for="file" class="w-full block h-32 relative bg-base-200 hover:bg-base-200/70 rounded-md border border-base-content border-dashed">
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 88ecc5bc4..b8cde23ae 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_for user, html: { class: 'space-y-4' }, data: { turbo_frame: :_top } do |f| %>
+<%= form_for user, html: { class: "space-y-4 #{'px-4' if turbo_native_android?}" }, data: { turbo_frame: :_top } do |f| %>
   <div class="space-y-2">
     <div class="flex space-x-4">
       <div class="w-full">