From b461fc1c4a28aa03f9cc2a3e4b99b52355885364 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jan 2025 22:08:12 +0200
Subject: [PATCH] add option to center the modal

---
 src/components/dialog_modal/dialog_modal.js           | 5 +++++
 src/components/dialog_modal/dialog_modal.vue          | 6 +++++-
 src/components/settings_modal/tabs/appearance_tab.vue | 5 +++++
 src/i18n/en.json                                      | 1 +
 src/modules/config.js                                 | 1 +
 src/modules/instance.js                               | 1 +
 6 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
index f14e3fe9a..b39851fe7 100644
--- a/src/components/dialog_modal/dialog_modal.js
+++ b/src/components/dialog_modal/dialog_modal.js
@@ -8,6 +8,11 @@ const DialogModal = {
       default: () => {},
       type: Function
     }
+  },
+  computed: {
+    mobileCenter () {
+      return this.$store.getters.mergedConfig.modalMobileCenter
+    }
   }
 }
 
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index b75d88d7d..1eb88efb5 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     class="dialog-container"
-    :class="{ 'dark-overlay': darkOverlay }"
+    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -100,6 +100,10 @@
     justify-content: stretch;
     align-items: end;
     justify-items: stretch;
+
+    &.-center-mobile {
+      align-items: center;
+    }
   }
 
   .dialog-modal.panel {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index bda0ab144..f1dde28ad 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -345,6 +345,11 @@
     <div class="setting-item">
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
+        <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="forcedRoundness"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3d7a674ce..49c7fc8b1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -381,6 +381,7 @@
     "actor_type_Person": "a normal user",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",
+    "mobile_center_dialog": "Vertically center dialogs on mobile",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
diff --git a/src/modules/config.js b/src/modules/config.js
index e1e395855..0543062c1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -142,6 +142,7 @@ export const defaultState = {
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
+  modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 72e34628e..7f920eaac 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -82,6 +82,7 @@ const defaultState = {
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
   modalOnRemoveUserFromFollowers: false,
+  modalMobileCenter: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',