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] 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;
+      }
     }
   }
 }