fix open modal mobile

app/javascript/application.js

@@ -57,7 +57,8 @@ import BarChart from './elements/bar_chart'
 import FieldCondition from './elements/field_condition'
 import ConfirmUpload from './elements/confirm_upload'
 import ScrollFade from './elements/scroll_fade'
-import ConvertModalLinks from './elements/convert_modal_links'
+import OpenModalMobile from './elements/open_modal_mobile'
+import HistoryBack from './elements/history_back'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -153,7 +154,8 @@ safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
 safeRegisterElement('confirm-upload', ConfirmUpload)
 safeRegisterElement('scroll-fade', ScrollFade)
-safeRegisterElement('convert-modal-links', ConvertModalLinks)
+safeRegisterElement('open-modal-mobile', OpenModalMobile)
+safeRegisterElement('history-back', HistoryBack)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/history_back.js

@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('click', this.onClick)
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('click', this.onClick)
+  }
+
+  onClick = (e) => {
+    e.preventDefault()
+
+    window.history.back()
+  }
+}

app/javascript/elements/open_modal_mobile.js

@@ -1,8 +1,9 @@
 export default class extends HTMLElement {
   connectedCallback () {
     if (!this.isMobile()) return
+    if (window.innerWidth >= 768) return
 
-    document.querySelectorAll('a[data-turbo-frame="modal"]').forEach((link) => {
+    this.querySelectorAll('a[data-turbo-frame]').forEach((link) => {
       link.dataset.turboFrame = '_top'
     })
   }

app/javascript/elements/turbo_modal.js

@@ -42,10 +42,6 @@ export default actionable(class extends HTMLElement {
   close = (e) => {
     e?.preventDefault()
 
-    if (!this.closest('turbo-frame')?.src && window.history.length > 1) {
-      window.history.back()
-    } else {
-      this.remove()
-    }
+    this.remove()
   }
 })

app/javascript/template_builder/builder.vue

@@ -164,7 +164,7 @@
             v-if="withSendButton"
             id="send_button"
             :href="`/templates/${template.id}/submissions/new?with_link=true`"
-            data-turbo-frame="modal"
+            :data-turbo-frame="isMobile && isBreakpointLg ? '_top' : 'modal'"
             class="white-button md:!px-6"
             @click="maybeShowErrorTemplateAlert"
           >
@@ -229,7 +229,7 @@
                 <li>
                   <a
                     :href="`/templates/${template.id}/preferences`"
-                    data-turbo-frame="modal"
+                    :data-turbo-frame="isMobile && isBreakpointLg ? '_top' : 'modal'"
                     class="flex space-x-2"
                     @click="closeDropdown"
                   >