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

Fix emoji cut-off line-height
e8b3ac43 · Eric Eastwood · a8140d5c · e8b3ac43 · e8b3ac43 · e8b3ac43
Commit e8b3ac43 authored Mar 02, 2017 by Eric Eastwood
Showing with 3 additions and 4 deletions

awards.scss app/assets/stylesheets/framework/awards.scss +2 -0

emojis.scss app/assets/stylesheets/framework/emojis.scss +1 -1

notes.scss app/assets/stylesheets/pages/notes.scss +0 -3

No files found.
--- 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;


--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
 gl-emoji {
  display: inline-block;
+  display: inline-flex;
  vertical-align: middle;
  font-size: 1.5em;
-  line-height: 1;
 }
--- 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;