UX: better customize emoji layout on mobile (#9319)

app/assets/stylesheets/common/admin/admin_emojis.scss

@@ -4,47 +4,22 @@
       width: 220px;
     }
   }
-}
 
-.emoji-uploader {
+  .emoji-uploader {
-  display: flex;
-  align-items: flex-end;
-
-  input,
-  .select-kit {
-    width: 220px;
-    margin: 0 1em 0 0;
-  }
-
-  .upload-container {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
-    justify-content: center;
-    flex-direction: column;
-  }
-}
 
-.mobile-view {
+    input,
-  .admin-emojis {
+    .select-kit {
-    .emoji-uploader {
+      width: 220px;
+      margin: 0 1em 0 0;
+    }
+
+    .upload-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       flex-direction: column;
-
-      .fields {
-        input,
-        .select-kit {
-          width: 100%;
-        }
-      }
-
-      .upload-container {
-        margin: 1em 0 0 0;
-      }
-    }
-
-    #custom_emoji {
-      .select-kit {
-        display: none;
-      }
     }
   }
 }

app/assets/stylesheets/mobile.scss

@@ -29,6 +29,7 @@
 @import "mobile/admin_report";
 @import "mobile/admin_report_table";
 @import "mobile/admin_report_counters";
+@import "mobile/admin_emojis";
 @import "mobile/menu-panel";
 @import "mobile/reviewables";
 

app/assets/stylesheets/mobile/admin_emojis.scss

@@ -0,0 +1,35 @@
+.admin-emojis {
+  #custom_emoji {
+    .select-kit {
+      display: none;
+    }
+
+    tbody tr th {
+      @include ellipsis;
+
+      &:nth-child(2) {
+        max-width: 80px;
+      }
+    }
+  }
+
+  .emoji-uploader {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    .control {
+      margin-bottom: 1em;
+      width: 100%;
+
+      input,
+      .select-kit {
+        width: 100%;
+      }
+    }
+
+    .upload-container {
+      margin: 0;
+    }
+  }
+}