Fix emoji cut-off line-height

Maintain emoji line-height in it's context to avoid cut-off,
(Windows 10) http://i.imgur.com/xmdOLgv.png

This also allows us to get rid of the small bodge for the cut-off in
Safari

3 files changed, 3 insertions, 4 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 6c0d5de0a99..f363affa46c 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -99,6 +99,8 @@
   padding: 5px 6px;
   outline: 0;
 
+  line-height: 1;
+
   &.disabled {
     cursor: default;
 
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 680703cb4b1..0a8bc95590e 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -1,6 +1,6 @@
 gl-emoji {
   display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
   font-size: 1.5em;
-  line-height: 1;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 237312f3398..00f5f2645b3 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -188,9 +188,6 @@ ul.notes {
     .note-body {
       overflow-x: auto;
       overflow-y: hidden;
-      // Help with emoji cut-off (most noticable in Safari)
-      // See https://i.imgur.com/0dg87Y9.png
-      padding-top: 1px;
 
       .note-text {
         word-wrap: break-word;