fix emoji form & eliminate copypasta

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 {
+  .input {
-    line-height: 1;
+    height: 2em;
   }
 
   > *,

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;

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,

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 }">
+            <label
-              {{ $t('admin_dash.emoji.description') }}
+              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"
+                  class="bio resize-height input setting-control"
                 />
+              </div>
             </label>
           </li>
           <li>
-            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
+            <label
-              {{ $t('admin_dash.emoji.homepage') }}
+              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 }">
+            <label
-              {{ $t('admin_dash.emoji.fallback_src') }}
+              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 }">
+            <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>
+            <div class="setting-item">
               <Checkbox
                 v-model="packMeta['share-files']"
                 :disabled="!pack || pack.remote !== undefined"
+                class="setting-label setting-control"
               >
-              {{ $t('admin_dash.emoji.share') }}
-            </Checkbox>
-
               <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"

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>

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 {