From 37a290033833ed5c83ae583b41517295685c5f1e Mon Sep 17 00:00:00 2001
From: Jacopo <beschi.jacopo@gmail.com>
Date: Wed, 13 Feb 2019 10:03:07 +0100
Subject: Make emoji picker bigger

The emoji picker shows 9 emoji for each row.
On mobile devices the width is reduced to 7 emoji for each row.
---
 app/assets/stylesheets/framework/awards.scss    | 6 +++++-
 app/assets/stylesheets/framework/variables.scss | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

(limited to 'app/assets')

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index ad650d45314..fd4fb16b941 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -15,7 +15,7 @@
   margin-top: 3px;
   padding: $gl-padding;
   z-index: 300;
-  width: 300px;
+  width: $award-emoji-width;
   font-size: 14px;
   background-color: $white-light;
   border: 1px solid $border-white-light;
@@ -55,6 +55,10 @@
       transform: none;
     }
   }
+
+  @include media-breakpoint-down(xs) {
+    width: $award-emoji-width-xs;
+  }
 }
 
 .emoji-search {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 96dab609a13..ccc8baaa6c2 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -405,6 +405,8 @@ $status-icon-size: 22px;
 $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
 $award-emoji-positive-add-bg: #fed159;
 $award-emoji-positive-add-lines: #bb9c13;
+$award-emoji-width: 376px;
+$award-emoji-width-xs: 300px;
 
 /*
  * Search Box
-- 
cgit v1.2.3