unify native modals

app/controllers/submissions_export_controller.rb

@@ -26,6 +26,6 @@ class SubmissionsExportController < ApplicationController
   end
 
   def new
-    render layout: turbo_native_android? ? 'plain' : true
+    render layout: 'plain'
   end
 end

app/controllers/submissions_filters_controller.rb

@@ -14,6 +14,6 @@ class SubmissionsFiltersController < ApplicationController
   def show
     return head :not_found unless ALLOWED_NAMES.include?(params[:name])
 
-    render params[:name], layout: turbo_native_android? ? 'plain' : true
+    render params[:name], layout: 'plain'
   end
 end

app/controllers/template_folders_controller.rb

@@ -42,7 +42,7 @@ class TemplateFoldersController < ApplicationController
   end
 
   def edit
-    render layout: turbo_native_android? ? 'plain' : true
+    render layout: 'plain'
   end
 
   def update

app/controllers/templates_clone_controller.rb

@@ -8,7 +8,7 @@ class TemplatesCloneController < ApplicationController
 
     @template = Template.new(name: "#{@base_template.name} (#{I18n.t('clone')})")
 
-    render layout: turbo_native_android? ? 'plain' : true
+    render layout: 'plain'
   end
 
   def create

app/controllers/templates_folders_controller.rb

@@ -4,7 +4,7 @@ class TemplatesFoldersController < ApplicationController
   load_and_authorize_resource :template
 
   def edit
-    render layout: turbo_native_android? ? 'plain' : true
+    render layout: 'plain'
   end
 
   def update

app/controllers/user_initials_controller.rb

@@ -5,7 +5,7 @@ class UserInitialsController < ApplicationController
   authorize_resource :user_config
 
   def edit
-    render layout: turbo_native_android? ? 'plain' : true
+    render layout: 'plain'
   end
 
   def update

app/controllers/user_signatures_controller.rb

@@ -5,7 +5,7 @@ class UserSignaturesController < ApplicationController
   authorize_resource :user_config
 
   def edit
-    render layout: turbo_native_android? ? 'plain' : true
+    render layout: 'plain'
   end
 
   def update

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 ? (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 :class="inline ? (nativePlatform === 'android' ? 'pt-1.5 pb-6' : 'pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl'" :style="inline ? { paddingInline: '18px' } : null">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"

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 ? (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 :class="inline ? (nativePlatform === 'android' ? 'pt-1.5 pb-6' : 'pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'" :style="inline ? { paddingInline: '18px' } : null">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"

app/javascript/template_builder/documents_editor_modal.vue

@@ -63,7 +63,7 @@
         >
           <div
             class="flex-1 overflow-y-auto overflow-x-hidden px-4 md:px-6 py-4 space-y-4"
-            :style="inline && nativePlatform === 'ios' ? { paddingTop: '86px' } : null"
+            :style="inline ? { paddingInline: '18px', ...(nativePlatform === 'ios' ? { paddingTop: '86px' } : {}) } : null"
           >
             <div
               v-for="(doc, docIndex) in layout"

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 ? (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 :class="inline ? (nativePlatform === 'android' ? 'pt-1.5 pb-6' : 'pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'" :style="inline ? { paddingInline: '18px' } : null">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"

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 ? (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 :class="inline ? (nativePlatform === 'android' ? 'pt-1.5 pb-6' : 'pt-3 pb-6') : 'modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl'" :style="inline ? { paddingInline: '18px' } : null">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-2 font-medium"

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 ? (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 :class="inline ? (nativePlatform === 'android' ? 'pt-1.5 pb-6' : 'pt-3 pb-6') : 'modal-box pt-4 pb-6 mt-20 w-full'" :style="inline ? { paddingInline: '18px' } : null">
       <div
         v-if="!inline"
         class="flex justify-between items-center border-b pb-2 mb-3 font-medium"

app/views/layouts/application.html.erb

@@ -28,9 +28,7 @@
         <open-modal src="<%= url_for(**url_params, params: modal_uri.query_values) %>"></open-modal>
       <% end %>
     <% end %>
-    <% unless content_for?(:native_modal) %>
-      <turbo-frame id="modal"></turbo-frame>
-    <% end %>
+    <turbo-frame id="modal"></turbo-frame>
     <turbo-frame id="drawer"></turbo-frame>
     <%= render turbo_native_app? ? 'shared/native_navbar' : 'shared/navbar' %>
     <main class="max-w-6xl mx-auto px-4 md:px-2 mb-8">

app/views/shared/_turbo_drawer.html.erb

@@ -1,7 +1,7 @@
-<% if turbo_native_app? && !turbo_frame_request? %>
+<% if turbo_native_app? %>
   <% content_for(:native_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="drawer">
-    <native-modal class="block w-full" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+    <native-modal class="block max-w-lg mx-auto <%= turbo_native_android? ? 'pb-4' : 'pb-6' %>" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
       <%= yield %>
     </native-modal>
   </turbo-frame>

app/views/shared/_turbo_modal.html.erb

@@ -1,5 +1,4 @@
 <% if turbo_native_app? %>
-  <% content_for(:native_modal, 'true') %>
   <% content_for(:native_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="modal">
     <native-modal class="block max-w-lg mx-auto <%= turbo_native_android? ? 'pb-4' : 'pb-6' %>" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">

app/views/shared/_turbo_modal_large.html.erb

@@ -1,6 +1,7 @@
-<% if turbo_native_app? && turbo_frame_request? %>
+<% if turbo_native_app? %>
+  <% content_for(:native_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="modal">
-    <native-modal class="block w-full [&>.px-5]:px-4" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+    <native-modal class="block max-w-lg mx-auto <%= turbo_native_android? ? 'pb-4' : 'pb-6' %>" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
       <%= yield %>
     </native-modal>
   </turbo-frame>
@@ -23,11 +24,6 @@
       </div>
     </turbo-modal>
   </turbo-frame>
-<% elsif turbo_native_app? %>
-  <% content_for(:native_title, local_assigns[:title]) if local_assigns[:title] %>
-  <native-modal class="block w-full [&>.px-5]:px-4" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
-    <%= yield %>
-  </native-modal>
 <% else %>
   <% if local_assigns[:title] %>
     <div class="sticky top-0 z-10 flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium">

app/views/submissions/new.html.erb

@@ -26,7 +26,7 @@
       </div>
     </toggle-visible>
   <% end %>
-  <div class="px-5 mb-5 mt-5">
+  <div class="px-5 mt-5 <%= 'mb-5' unless turbo_native_app? %>" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <% unless only_detailed %>
       <div id="email" class="<%= 'hidden' if default_tab != 'email' %>">
         <%= render 'email_form', template: @template, variables_form:, can_send_emails:, viewer_submitter_uuids: %>

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 px-4' if turbo_native_android? %>">
+  <div class="space-y-2 <%= 'mt-1.5' if turbo_native_android? %>" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= 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">

app/views/submissions_filters/_filter_modal.html.erb

@@ -1,7 +1,7 @@
 <% path_uri = Addressable::URI.parse(params[:path].to_s) %>
 <% path = url_for(**Rails.application.routes.recognize_path(path_uri.path, method: :get)) %>
 <%= render 'shared/turbo_modal', title: local_assigns[:title] do %>
-  <%= form_for '', url: path, method: :get, data: { turbo_frame: :_top }, html: { autocomplete: :off, class: ('px-4' if turbo_native_android?) } do |f| %>
+  <%= form_for '', url: path, method: :get, data: { turbo_frame: :_top }, html: { autocomplete: :off, style: ('padding-inline: 18px' if turbo_native_app?) } do |f| %>
     <%= hidden_field_tag :q, params[:q] if params[:q].present? %>
     <%= hidden_field_tag :scope, params[:scope] if params[:scope].present? %>
     <%= hidden_field_tag :archived, params[:archived] if params[:archived].present? %>

app/views/submitters/edit.html.erb

@@ -1,5 +1,5 @@
 <%= render 'shared/turbo_modal_large', title: t('edit_recipient') do %>
-  <div class="px-5 mb-5 mt-4">
+  <div class="px-5 mt-4 <%= 'mb-5' unless turbo_native_app? %>" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= form_for '', url: submitter_path(@submitter), method: :patch, html: { autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
       <div class="mb-2">
         <submitter-item class="form-control">

app/views/template_folders/edit.html.erb

@@ -1,5 +1,5 @@
 <%= 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, class: ('px-4' if turbo_native_android?) } do |f| %>
+  <%= form_for @template_folder, url: folder_path(@template_folder), data: { turbo_frame: :_top }, html: { autocomplete: :off, style: ('padding-inline: 18px' if turbo_native_app?) } 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>

app/views/templates/new.html.erb

@@ -1,5 +1,5 @@
 <%= render 'shared/turbo_modal', title: @base_template ? t('clone_template') : t('new_document_template') do %>
-  <div class="<%= 'px-4' if turbo_native_app? %>">
+  <div style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= render 'templates/file_form' %>
   </div>
 <% end %>

app/views/templates_clone/_form.html.erb

@@ -1,4 +1,4 @@
-<%= 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| %>
+<%= form_for @template, url: template_clone_index_path(@base_template), data: { turbo_frame: :_top }, html: { autocomplete: :off, style: ('padding-inline: 18px' if turbo_native_app?) } 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 %>
   <% with_accounts = (can?(:manage, :tenants) || true_user != current_user) && accounts.where.not(id: current_account.id).exists? %>
   <% if with_accounts %>

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, class: ('px-4' if turbo_native_android?) } do |f| %>
+    <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { id: 'subfolder_form', autocomplete: :off, style: ('padding-inline: 18px' if turbo_native_app?) } 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: "#{turbo_native_android? ? 'mt-1.5 px-4' : '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' : 'mt-6'} #{'hidden' if with_subfolder}", style: ('padding-inline: 18px' if turbo_native_app?) } 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 %>

app/views/templates_preferences/show.html.erb

@@ -18,7 +18,7 @@
       </div>
     </toggle-visible>
   <% end %>
-  <div id="general" class="px-5 mb-4">
+  <div id="general" class="px-5 mb-4" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= render 'access' %>
     <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-2' }, data: { close_on_submit: false } do |f| %>
       <toggle-on-submit data-element-id="bcc_saved_alert"></toggle-on-submit>
@@ -146,14 +146,14 @@
     <%= render 'templates_code_modal/preferences', class: 'pt-2' %>
   </div>
   <% if show_recipients %>
-    <div id="recipients" class="hidden mt-2 mb-4 px-5 pt-1 pb-2">
+    <div id="recipients" class="hidden mt-2 mb-4 px-5 pt-1 pb-2" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
       <native-event data-on="submit" data-name="template-builder:update" class="block">
         <%= render 'recipients', template: @template %>
       </native-event>
     </div>
   <% end %>
   <% if show_api %>
-    <div id="api" class="hidden mt-2 mb-4 px-5">
+    <div id="api" class="hidden mt-2 mb-4 px-5" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
       <div>
         <label class="text-sm font-semibold" for="template_id">
           <%= t('template_id') %>

app/views/templates_share_link/show.html.erb

@@ -1,7 +1,7 @@
 <% multiple_submitters = @template.submitters.to_a.length > 1 %>
 <% enough_defined_submitters = Templates.filter_undefined_submitters(@template.submitters).size < 2 %>
 <%= render 'shared/turbo_modal_large', title: t('share_link') do %>
-  <div class="<%= 'mt-2' unless turbo_native_android? %> mb-4 px-5">
+  <div class="<%= 'mt-2' unless turbo_native_android? %> <%= 'mb-4' unless turbo_native_app? %> px-5" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <% if @template.variables_schema.present? %>
       <div class="flex items-start gap-4 p-4 border border-base-300 rounded-2xl bg-base-100 mt-4">
         <%= svg_icon('info_circle', class: 'stroke-current shrink-0 h-6 w-6') %>

app/views/user_initials/edit.html.erb

@@ -12,7 +12,7 @@
       <% end %>
     </div>
   </toggle-visible>
-  <div id="draw" class="mt-3 <%= 'px-4' if turbo_native_android? %>">
+  <div id="draw" class="mt-3" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= 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 <%= 'px-4' if turbo_native_android? %>">
+  <div id="upload" class="hidden mt-3" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= 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">

app/views/user_signatures/edit.html.erb

@@ -12,7 +12,7 @@
       <% end %>
     </div>
   </toggle-visible>
-  <div id="draw" class="mt-3 <%= 'px-4' if turbo_native_android? %>">
+  <div id="draw" class="mt-3" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= 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 <%= 'px-4' if turbo_native_android? %>">
+  <div id="upload" class="hidden mt-3" style="<%= 'padding-inline: 18px' if turbo_native_app? %>">
     <%= 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">

app/views/users/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for user, html: { class: "space-y-4 #{'px-4' if turbo_native_app?}" }, data: { turbo_frame: :_top } do |f| %>
+<%= form_for user, html: { class: 'space-y-4', style: ('padding-inline: 18px' if turbo_native_app?) }, data: { turbo_frame: :_top } do |f| %>
   <div class="space-y-2">
     <div class="flex space-x-4">
       <div class="w-full">