From d3474e171e4f768ccc8fe4aff919421582c5e453 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Dec 2024 18:48:58 +0200
Subject: [PATCH 1/6] fix confirmation modal overflows

---
 src/App.js                                   |  4 +++
 src/components/dialog_modal/dialog_modal.vue | 35 ++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index befcece8..3142d062 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,6 +47,9 @@ export default {
   watch: {
     themeApplied (value) {
       this.removeSplash()
+    },
+    layoutType (value) {
+      document.getElementById('modal').classList = ['-' + this.layoutType]
     }
   },
   created () {
@@ -54,6 +57,7 @@ export default {
     const val = this.$store.getters.mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
+    document.getElementById('modal').classList = ['-' + this.layoutType]
   },
   mounted () {
     if (this.$store.state.interface.themeApplied) {
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 93b8ac0f..baae3620 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -69,12 +69,41 @@
     margin: 0;
     padding: 0.5em;
     border-top: 1px solid var(--border);
-    display: flex;
-    justify-content: flex-end;
+    display: grid;
+    grid-gap: 0.5em;
+    grid-auto-columns: minmax(max-content, 1fr);
+    height: auto;
 
     button {
       width: auto;
-      margin-left: 0.5rem;
+      padding-left: 2em;
+      padding-right: 2em;
+    }
+  }
+}
+
+#modal.-mobile {
+  .dialog-modal.panel {
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: none;
+    transform: none;
+    width: 100vw;
+    margin: auto;
+    z-index: 2001;
+
+    .dialog-modal-footer {
+      flex-direction: column;
+      justify-content: flex-end;
+      grid-auto-columns: initial;
+      grid-auto-rows: 1fr;
+
+      button {
+        grid-column: 1;
+        height: 2em;
+      }
     }
   }
 }

From d5d7582741d43640e8a8f320a01e214a9182da21 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Dec 2024 18:55:41 +0200
Subject: [PATCH 2/6] changelog

---
 changelog.d/modals-mobile.change | 1 +
 changelog.d/modals.fix           | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 changelog.d/modals-mobile.change
 create mode 100644 changelog.d/modals.fix

diff --git a/changelog.d/modals-mobile.change b/changelog.d/modals-mobile.change
new file mode 100644
index 00000000..e6a768c5
--- /dev/null
+++ b/changelog.d/modals-mobile.change
@@ -0,0 +1 @@
+modal layout for mobile has new layout to make it easy to use
diff --git a/changelog.d/modals.fix b/changelog.d/modals.fix
new file mode 100644
index 00000000..68278bfc
--- /dev/null
+++ b/changelog.d/modals.fix
@@ -0,0 +1 @@
+fixed modals buttons overflow

From b593cadff87fc8e263554c9f37d8da1a6bc58e4a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Dec 2024 22:19:49 +0200
Subject: [PATCH 3/6] better centering

---
 src/components/dialog_modal/dialog_modal.vue | 52 +++++++++++---------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index baae3620..50b5d5e6 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    class="dialog-container"
     :class="{ 'dark-overlay': darkOverlay }"
     @click.self.stop="onCancel()"
   >
@@ -41,14 +42,21 @@
   }
 }
 
-.dialog-modal.panel {
+.dialog-container {
+  display: grid;
+  position: fixed;
   top: 0;
-  left: 50%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+.dialog-modal.panel {
   max-height: 80vh;
   max-width: 90vw;
-  margin: 15vh auto;
-  position: fixed;
-  transform: translateX(-50%);
   z-index: 2001;
   cursor: default;
   display: block;
@@ -83,27 +91,25 @@
 }
 
 #modal.-mobile {
+  .dialog-container {
+    justify-content: stretch;
+    align-items: end;
+    justify-items: stretch;
+  }
+
   .dialog-modal.panel {
-    top: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-width: none;
-    transform: none;
-    width: 100vw;
-    margin: auto;
-    z-index: 2001;
+    min-width: 100vw;
+  }
 
-    .dialog-modal-footer {
-      flex-direction: column;
-      justify-content: flex-end;
-      grid-auto-columns: initial;
-      grid-auto-rows: 1fr;
+  .dialog-modal-footer {
+    flex-direction: column;
+    justify-content: flex-end;
+    grid-auto-columns: initial;
+    grid-auto-rows: 1fr;
 
-      button {
-        grid-column: 1;
-        height: 2em;
-      }
+    button {
+      grid-column: 1;
+      height: 2em;
     }
   }
 }

From fbb1dad55fb010c91e99e7350e3e471e63f9ec49 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Dec 2024 22:29:50 +0200
Subject: [PATCH 4/6] better support for 3+ buttons

---
 src/components/dialog_modal/dialog_modal.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 50b5d5e6..7ed22f6e 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -79,11 +79,14 @@
     border-top: 1px solid var(--border);
     display: grid;
     grid-gap: 0.5em;
-    grid-auto-columns: minmax(max-content, 1fr);
+    grid-template-columns: min-content;
+    grid-auto-columns: min-content;
+    grid-auto-flow: column dense;
     height: auto;
 
     button {
       width: auto;
+      white-space: nowrap;
       padding-left: 2em;
       padding-right: 2em;
     }
@@ -104,8 +107,10 @@
   .dialog-modal-footer {
     flex-direction: column;
     justify-content: flex-end;
-    grid-auto-columns: initial;
-    grid-auto-rows: 1fr;
+    grid-template-columns: 1fr;
+    grid-auto-columns: none;
+    grid-auto-rows: auto;
+    grid-auto-flow: row dense;
 
     button {
       grid-column: 1;

From caa2fd44ff644a06c9a1a71716af18fb64598e4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2024 00:21:17 +0200
Subject: [PATCH 5/6] center text

---
 src/components/dialog_modal/dialog_modal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 7ed22f6e..a0913746 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -71,6 +71,7 @@
     margin: 0;
     padding: 1rem;
     white-space: normal;
+    text-align: center;
   }
 
   .dialog-modal-footer {

From 843f9ff519edb65f2a562e9b1a2226eddc3177c9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2024 01:13:08 +0200
Subject: [PATCH 6/6] make buttons easier to press on mobile

---
 src/components/dialog_modal/dialog_modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index a0913746..096c8ac8 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -115,7 +115,7 @@
 
     button {
       grid-column: 1;
-      height: 2em;
+      height: 3em;
     }
   }
 }