From 9bbaaea1e8561692d7c095c034637de99a791d29 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 31 Mar 2020 08:55:47 +0200
Subject: [PATCH] UX: better customize emoji layout on mobile (#9319)

---
 .../common/admin/admin_emojis.scss            | 49 +++++--------------
 app/assets/stylesheets/mobile.scss            |  1 +
 .../stylesheets/mobile/admin_emojis.scss      | 35 +++++++++++++
 3 files changed, 48 insertions(+), 37 deletions(-)
 create mode 100644 app/assets/stylesheets/mobile/admin_emojis.scss

diff --git a/app/assets/stylesheets/common/admin/admin_emojis.scss b/app/assets/stylesheets/common/admin/admin_emojis.scss
index c6cf4c2fbda..fd2cfddb066 100644
--- a/app/assets/stylesheets/common/admin/admin_emojis.scss
+++ b/app/assets/stylesheets/common/admin/admin_emojis.scss
@@ -4,47 +4,22 @@
       width: 220px;
     }
   }
-}
 
-.emoji-uploader {
-  display: flex;
-  align-items: flex-end;
-
-  input,
-  .select-kit {
-    width: 220px;
-    margin: 0 1em 0 0;
-  }
-
-  .upload-container {
+  .emoji-uploader {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  }
-}
+    align-items: flex-end;
 
-.mobile-view {
-  .admin-emojis {
-    .emoji-uploader {
+    input,
+    .select-kit {
+      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;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss
index 567a051794d..ee9c3ed92df 100644
--- a/app/assets/stylesheets/mobile.scss
+++ b/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";
 
diff --git a/app/assets/stylesheets/mobile/admin_emojis.scss b/app/assets/stylesheets/mobile/admin_emojis.scss
new file mode 100644
index 00000000000..2014a51ba3d
--- /dev/null
+++ b/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;
+    }
+  }
+}