fix open modal mobile

app/views/layouts/application.html.erb

@@ -27,7 +27,6 @@
       <% end %>
     <% end %>
     <turbo-frame id="modal"></turbo-frame>
-    <convert-modal-links></convert-modal-links>
     <turbo-frame id="drawer"></turbo-frame>
     <%= render 'shared/navbar' %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>

app/views/shared/_turbo_modal_large.html.erb

@@ -1,18 +1,34 @@
-<turbo-frame id="modal">
-  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto !justify-normal md:!justify-center" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
-    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
-    <div class="bg-base-100 min-h-screen max-h-screen md:min-h-fit md:mt-3 md:rounded-2xl relative w-full relative overflow-y-auto">
-      <% if local_assigns[:title] %>
-        <div class="flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium mt-0.5">
-          <span>
-            <%= local_assigns[:title] %>
-          </span>
-          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+<% if turbo_frame_request? %>
+  <turbo-frame id="modal">
+    <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto !justify-normal md:!justify-center" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+      <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+      <div class="bg-base-100 min-h-screen max-h-screen md:min-h-fit md:mt-3 md:rounded-2xl relative w-full relative overflow-y-auto">
+        <% if local_assigns[:title] %>
+          <div class="flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium mt-0.5">
+            <span>
+              <%= local_assigns[:title] %>
+            </span>
+            <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+          </div>
+        <% end %>
+        <div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px); max-height: calc(100dvh - 14px - 45px)">
+          <%= yield %>
         </div>
-      <% end %>
-      <div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px); max-height: calc(100dvh - 14px - 45px)">
-        <%= yield %>
       </div>
+    </turbo-modal>
+  </turbo-frame>
+<% 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">
+      <span>
+        <%= local_assigns[:title] %>
+      </span>
+      <history-back>
+        <a href="#" class="text-xl">&times;</a>
+      </history-back>
     </div>
-  </turbo-modal>
-</turbo-frame>
+  <% end %>
+  <div class="w-full">
+    <%= yield %>
+  </div>
+<% end %>

app/views/submissions/show.html.erb

@@ -25,10 +25,12 @@
           <span class="hidden md:inline"><%= t('audit_log') %></span>
         </a>
       <% elsif signed_in? %>
-        <%= link_to submission_events_path(@submission), class: 'white-button', data: { turbo_frame: :modal } do %>
-          <%= svg_icon('logs', class: 'w-6 h-6') %>
-          <span class="hidden md:block"><%= t('event_log') %></span>
-        <% end %>
+        <open-modal-mobile class="flex">
+          <%= link_to submission_events_path(@submission), class: 'white-button', data: { turbo_frame: :modal } do %>
+            <%= svg_icon('logs', class: 'w-6 h-6') %>
+            <span class="hidden md:block"><%= t('event_log') %></span>
+          <% end %>
+        </open-modal-mobile>
       <% end %>
       <% if signed_in? && !@submission.completed_at? && can?(:manage, :resend_all) && @submission.submitters.to_a.size > 3 && !@submission.archived_at? && !@submission.template&.archived_at? && !@submission.expired? && can?(:update, @submission) %>
         <% pending_submitters_count = @submission.submitters.to_a.count { |s| !s.completed_at? && s.email.present? && !s.declined_at? } %>
@@ -181,9 +183,11 @@
               </div>
               <% 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') %>">
-                  <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
-                    <%= svg_icon('pencil', class: 'w-5 h-5') %>
-                  <% end %>
+                  <open-modal-mobile>
+                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
+                      <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                    <% end %>
+                  </open-modal-mobile>
                 </span>
               <% end %>
             </div>

app/views/submissions_dashboard/index.html.erb

@@ -18,10 +18,12 @@
       <span class="hidden sm:block">
         <%= render 'templates/upload_button' %>
       </span>
-      <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-        <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-        <span class="hidden md:block"><%= t('create') %></span>
-      <% end %>
+      <open-modal-mobile class="flex">
+        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+          <span class="hidden md:block"><%= t('create') %></span>
+        <% end %>
+      </open-modal-mobile>
     <% end %>
   </div>
 </div>

app/views/template_folders/show.html.erb

@@ -37,10 +37,12 @@
         <span class="hidden sm:block">
           <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
         </span>
-        <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-          <span class="hidden md:block"><%= t('create') %></span>
-        <% end %>
+        <open-modal-mobile class="flex">
+          <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+            <span class="hidden md:block"><%= t('create') %></span>
+          <% end %>
+        </open-modal-mobile>
       <% end %>
     </div>
   </div>

app/views/templates/_submission.html.erb

@@ -53,9 +53,11 @@
               </a>
               <% 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 tooltip tooltip-top tooltip-no-touch md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
-                  <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
-                    <%= svg_icon('pencil', class: 'w-5 h-5') %>
-                  <% end %>
+                  <open-modal-mobile>
+                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
+                      <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                    <% end %>
+                  </open-modal-mobile>
                 </span>
               <% end %>
             </span>
@@ -146,9 +148,11 @@
                     </a>
                     <% 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 tooltip tooltip-top tooltip-no-touch md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
-                        <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
-                          <%= svg_icon('pencil', class: 'w-5 h-5') %>
-                        <% end %>
+                        <open-modal-mobile>
+                          <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
+                            <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                          <% end %>
+                        </open-modal-mobile>
                       </span>
                     <% end %>
                   </span>

app/views/templates/_title.html.erb

@@ -52,12 +52,14 @@
             <% end %>
           </div>
         <% end %>
-        <%= link_to template_share_link_path(template), class: 'absolute md:relative bottom-0 right-0 btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white mt-1 px-2', data: { turbo_frame: :modal } 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>
-          </span>
-        <% end %>
+        <open-modal-mobile class="absolute md:relative 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 %>
+            <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>
+            </span>
+          <% end %>
+        </open-modal-mobile>
       </div>
     <% end %>
   </div>

app/views/templates/show.html.erb

@@ -18,10 +18,12 @@
           <span><%= t('export') %></span>
         <% end %>
         <% if !@template.archived_at? && can?(:create, Submission) %>
-          <%= link_to new_template_submission_path(@template), id: 'add_recipients_button', class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
-            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-            <%= t('add_recipients_html') %>
-          <% end %>
+          <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 %>
+              <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+              <%= t('add_recipients_html') %>
+            <% end %>
+          </open-modal-mobile>
         <% end %>
       </div>
     </div>

app/views/templates_dashboard/index.html.erb

@@ -30,10 +30,12 @@
         <span class="hidden sm:block">
           <%= render 'templates/upload_button' %>
         </span>
-        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-          <span class="hidden md:block"><%= t('create') %></span>
-        <% end %>
+        <open-modal-mobile class="flex">
+          <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+            <span class="hidden md:block"><%= t('create') %></span>
+          <% end %>
+        </open-modal-mobile>
       <% end %>
     </div>
   </div>