From c085acd2dd5ea2a8e731d6f0549054396ea1ba85 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Dec 2025 13:35:41 +0200
Subject: [PATCH] fix emoji form & eliminate copypasta

---
 src/App.scss                                  |   6 +-
 src/components/font_control/font_control.vue  |  34 ------
 .../settings_modal/admin_tabs/emoji_tab.scss  |   5 +
 .../settings_modal/admin_tabs/emoji_tab.vue   | 111 +++++++++++-------
 .../helpers/boolean_setting.vue               |  27 -----
 .../settings_modal/settings_modal.scss        |  20 ++++
 6 files changed, 97 insertions(+), 106 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d891508fe..bf325c386 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -381,6 +381,7 @@ nav {
   font-size: 1em;
   font-family: sans-serif;
   font-family: var(--font);
+  height: 2em;
 
   &.-transparent {
     backdrop-filter: blur(0.125em) contrast(60%);
@@ -705,9 +706,10 @@ option {
   display: inline-flex;
   vertical-align: middle;
   min-height: 2em;
+  align-items: baseline;
 
-  .Select select {
-    line-height: 1;
+  .input {
+    height: 2em;
   }
 
   > *,
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index b863d253a..5124fd53a 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -136,40 +136,6 @@
 <script src="./font_control.js"></script>
 
 <style lang="scss">
-// Copy-paste of BooleanSetting
-.font-control {
-  display: grid;
-  grid-template-columns: subgrid;
-
-  .checkbox {
-    display: grid;
-    grid-template-columns: subgrid;
-  }
-
-  .label {
-    grid-area: label;
-    text-align: right;
-  }
-
-  .-mobile & {
-    .font-input {
-      display: block;
-    }
-
-    .font-selector {
-      margin-top: 0.5em;
-    }
-
-    .label {
-      text-align: left;
-    }
-  }
-
-  .checkbox-indicator {
-    grid-area: control;
-  }
-}
-
 .invalid-tooltip {
   margin: 0.5em 1em;
   min-width: 10em;
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 327d0f376..af1cfcf9c 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -12,6 +12,7 @@
       display: flex;
       flex: 1 0 auto;
       justify-content: end;
+      align-items: end;
 
       &:not(.btn-group) {
         gap: 0.5em;
@@ -27,6 +28,10 @@
       padding: 0.5em;
       font-size: 1rem;
     }
+
+    .popover-wrapper {
+      display: flex;
+    }
   }
 
   .selector-buttons,
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index ba68a28a7..ecec6cd57 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -43,7 +43,7 @@
                   :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
                 >
                 <button
-                  class="button button-default btn emoji-tab-popover-button"
+                  class="button button-default emoji-tab-popover-button"
                   type="button"
                   @click="listRemotePacks"
                 >
@@ -112,11 +112,11 @@
           </Popover>
         </span>
       </h3>
-      <div class="setting-list">
+      <div class="setting-section">
         <h4 class="toolbar">
           {{ $t('admin_dash.emoji.edit_pack') }}
         </h4>
-        <div class="selector-buttons setting-list">
+        <div class="selector-buttons">
           <button
             :disabled="!pack || pack.remote !== undefined"
             class="button button-default btn"
@@ -254,73 +254,98 @@
         </h5>
         <ul class="setting-list">
           <li>
-            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
-              {{ $t('admin_dash.emoji.description') }}
-              <ModifiedIndicator
-                :changed="metaEdited('description')"
-                message-key="admin_dash.emoji.metadata_changed"
-              />
-
-              <textarea
-                v-model="packMeta.description"
-                :disabled="!pack || pack.remote !== undefined"
-                class="bio resize-height input"
-              />
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
+                <ModifiedIndicator
+                  :changed="metaEdited('description')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
+                {{ $t('admin_dash.emoji.description') }}
+              </span>
+              <div>
+                <textarea
+                  v-model="packMeta.description"
+                  :disabled="!pack || pack.remote !== undefined"
+                  class="bio resize-height input setting-control"
+                />
+              </div>
             </label>
           </li>
           <li>
-            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
-              {{ $t('admin_dash.emoji.homepage') }}
-              <ModifiedIndicator
-                :changed="metaEdited('homepage')"
-                message-key="admin_dash.emoji.metadata_changed"
-              />
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
+                <ModifiedIndicator
+                  :changed="metaEdited('homepage')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
+                {{ $t('admin_dash.emoji.homepage') }}
+              </span>
 
               <input
                 v-model="packMeta.homepage"
-                class="emoji-info-input input"
+                class="emoji-info-input input setting-control"
                 :disabled="!pack || pack.remote !== undefined"
               >
             </label>
           </li>
           <li>
-            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
-              {{ $t('admin_dash.emoji.fallback_src') }}
-              <ModifiedIndicator
-                :changed="metaEdited('fallback-src')"
-                message-key="admin_dash.emoji.metadata_changed"
-              />
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
+                <ModifiedIndicator
+                  :changed="metaEdited('fallback-src')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
+                {{ $t('admin_dash.emoji.fallback_src') }}
+              </span>
 
               <input
                 v-model="packMeta['fallback-src']"
-                class="emoji-info-input input"
+                class="emoji-info-input input setting-control"
                 :disabled="!pack || pack.remote !== undefined"
               >
             </label>
           </li>
           <li>
-            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
-              {{ $t('admin_dash.emoji.fallback_sha256') }}
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
+                {{ $t('admin_dash.emoji.fallback_sha256') }}
+              </span>
 
               <input
                 v-model="packMeta['fallback-src-sha256']"
                 :disabled="!pack || pack.remote !== undefined"
-                class="emoji-info-input input"
+                class="emoji-info-input input setting-control"
               >
             </label>
           </li>
           <li>
-            <Checkbox
-              v-model="packMeta['share-files']"
-              :disabled="!pack || pack.remote !== undefined"
-            >
-              {{ $t('admin_dash.emoji.share') }}
-            </Checkbox>
-
-            <ModifiedIndicator
-              :changed="metaEdited('share-files')"
-              message-key="admin_dash.emoji.metadata_changed"
-            />
+            <div class="setting-item">
+              <Checkbox
+                v-model="packMeta['share-files']"
+                :disabled="!pack || pack.remote !== undefined"
+                class="setting-label setting-control"
+              >
+              <ModifiedIndicator
+                :changed="metaEdited('share-files')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
+                {{ $t('admin_dash.emoji.share') }}
+              </Checkbox>
+            </div>
+          </li>
+          <li>
             <div class="meta-buttons">
               <button
                 v-if="pack && pack.remote === undefined"
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 7f3adf5ad..2134ad7ce 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -43,30 +43,3 @@
 </template>
 
 <script src="./boolean_setting.js"></script>
-
-<style lang="scss">
-.BooleanSetting {
-  display: grid;
-  grid-template-columns: subgrid;
-
-  .checkbox {
-    display: grid;
-    grid-template-columns: subgrid;
-  }
-
-  .label {
-    grid-area: label;
-    text-align: right;
-  }
-
-  .-mobile & {
-    .label {
-      text-align: left;
-    }
-  }
-
-  .checkbox-indicator {
-    grid-area: control;
-  }
-}
-</style>
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index c757d2964..1ca9ec318 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -79,6 +79,26 @@
 
     .setting-control {
       grid-area: control;
+
+      &.checkbox {
+        display: grid;
+        grid-template-columns: subgrid;
+
+        .label {
+          grid-area: label;
+          text-align: right;
+        }
+
+        .checkbox-indicator {
+          grid-area: control;
+        }
+
+        .-mobile & {
+          .label {
+            text-align: left;
+          }
+        }
+      }
     }
 
     .setting-control.setting-label {