third pass of emoji reorganizing

src/App.scss

@@ -560,7 +560,9 @@ textarea {
   &.disabled {
     cursor: not-allowed;
     color: var(--textFaint);
-    background-color: transparent;
+
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
   }
 
   &[type="range"] {

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -1,4 +1,8 @@
 .EmojiTab {
+  .setting-list {
+    padding-left: 0.75em;
+  }
+
   .toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -20,24 +24,27 @@
 
     .button-default {
       flex: 0 0 auto;
-      padding: 0.33em;
+      padding: 0.5em;
       font-size: 1rem;
     }
   }
 
+  .selector-buttons,
   .meta-buttons {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5em;
   }
 
+  h5 {
+    margin-top: 1em;
+    margin-bottom: 0.25em;
+  }
+
   h3.toolbar {
     align-items: end;
   }
 
-  h4.toolbar {
-    align-items: baseline;
-  }
-
   .emoji-info-input {
     width: 100%;
   }

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -112,13 +112,11 @@
           </Popover>
         </span>
       </h3>
-      <ul class="setting-list">
-        <li>
+      <div class="setting-list">
         <h4 class="toolbar">
-            <span class="header-text">
           {{ $t('admin_dash.emoji.edit_pack') }}
-            </span>
-            <span class="header-buttons">
+        </h4>
+        <div class="selector-buttons setting-list">
           <button
             :disabled="!pack || pack.remote !== undefined"
             class="button button-default btn"
@@ -190,8 +188,8 @@
               </template>
             </Popover>
           </button>
-            </span>
-            <span class="header-buttons btn-group">
+
+          <span class="btn-group">
             <Select
               v-model="packName"
               class="form-control"
@@ -245,14 +243,15 @@
               </template>
             </Popover>
           </span>
-          </h4>
-        </li>
-      </ul>
+        </div>
+        <h5>
+          {{ $t('admin_dash.emoji.metadata') }}
 
-      <div
-        class="pack-info-wrapper"
-        :class="{ disabled: !pack }"
-      >
+          <ModifiedIndicator
+            :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
+            message-key="admin_dash.emoji.emoji_changed"
+          />
+        </h5>
         <ul class="setting-list">
           <li>
             <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
@@ -340,22 +339,19 @@
                 {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
             </div>
-
           </li>
         </ul>
-
-        <ul class="setting-list">
-          <h4>
+        <h5>
           {{ $t('admin_dash.emoji.files') }}
 
           <ModifiedIndicator
             :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
             message-key="admin_dash.emoji.emoji_changed"
           />
-          </h4>
+        </h5>
 
         <div
-            class="emoji-list"
+          class="emoji-list setting-list"
         >
           <EmojiEditingPopover
             v-if="pack && pack.remote === undefined"
@@ -406,11 +402,9 @@
             </template>
           </EmojiEditingPopover>
         </div>
-        </ul>
       </div>
       <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
       <button
-
         class="button button-default btn"
         type="button"
         @click="importFromFS"

src/i18n/en.json

@@ -1307,6 +1307,7 @@
       "remote_pack_instance": "Remote pack instance",
       "emoji_pack": "Emoji pack",
       "edit_pack": "Edit pack",
+      "metadata": "Metadata",
       "description": "Description",
       "homepage": "Homepage",
       "fallback_src": "Fallback source",