emoji tab fixes

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -1,6 +1,6 @@
 .EmojiTab {
   .setting-list {
-    padding-left: 0.75em;
+    margin: 0.5em 2em;
   }
 
   .toolbar {
@@ -39,6 +39,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: 0.5em;
+    margin-left: 1em;
   }
 
   h5 {
@@ -74,13 +75,21 @@
     flex-wrap: wrap;
     gap: 1em;
 
+    .button-unstyled {
+      display: flex;
+    }
+
+    .emoji-item,
     .placeholder {
-      background: var(--textFaint);
-      border-radius: 0.5em;
       width: 2em;
       height: 2em;
       opacity: 0.5;
     }
+
+    .placeholder {
+      background: var(--textFaint);
+      border-radius: 0.5em;
+    }
   }
 }
 

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -116,7 +116,7 @@
         <h4 class="toolbar">
           {{ $t('admin_dash.emoji.edit_pack') }}
         </h4>
-        <div class="selector-buttons">
+        <div class="setting-item selector-buttons">
           <button
             :disabled="!pack || pack.remote !== undefined"
             class="button button-default btn"
@@ -265,13 +265,12 @@
                 />
                 {{ $t('admin_dash.emoji.description') }}
               </span>
-              <div>
               <textarea
                 v-model="packMeta.description"
                 :disabled="!pack || pack.remote !== undefined"
-                  class="bio resize-height input setting-control"
+                height="4"
+                class="bio resize-height input textarea setting-control"
               />
-              </div>
             </label>
           </li>
           <li>
@@ -380,6 +379,7 @@
         >
           <EmojiEditingPopover
             v-if="pack && pack.remote === undefined"
+            class="emoji-item"
             placement="bottom"
             new-upload
             :title="$t('admin_dash.emoji.adding_new')"

src/components/settings_modal/settings_modal.scss

@@ -31,7 +31,7 @@
 
   h5 {
     font-size: 1rem;
-    margin-right: 1em;
+    margin-left: 1em;
     margin-bottom: 0.25em;
     margin-top: 0.75em;
   }
@@ -70,6 +70,7 @@
     .setting-label {
       grid-area: label;
       text-align: right;
+      align-self: baseline;
     }
 
     .ModifiedIndicator,
@@ -80,6 +81,11 @@
     .setting-control {
       grid-area: control;
 
+      &.textarea {
+        align-self: baseline;
+        overflow: auto;
+      }
+
       &.checkbox {
         display: grid;
         grid-template-columns: subgrid;