From f3fc9546f1295c4264d4bd98e6489efcd03f8e4e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Sep 2021 13:57:14 -0500
Subject: [PATCH] Status: fix annoying height difference when doing an emoji
 react

---
 app/styles/components/emoji-reacts.scss | 14 ++++++++++----
 app/styles/components/status.scss       | 11 +----------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index a38a2df67e..68cbc585c7 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -135,6 +135,8 @@
   .svg-icon {
     width: 20px;
     height: 20px;
+    display: block;
+    overflow: visible;
   }
 
   .icon-button__emoji .emojione {
@@ -142,6 +144,10 @@
     height: 20px;
   }
 
+  svg {
+    stroke-width: 2px;
+  }
+
   svg.icon-tabler {
     // Tabler icons are a little thicker than Feather icons
     stroke-width: 1.6px !important;
@@ -151,10 +157,10 @@
 // This icon is a little different than the others...
 .status__action-bar__counter--favourite,
 .detailed-status__button--favourite {
-  .svg-icon {
-    width: 26px !important;
-    height: 26px !important;
-    transform: translateY(-1px);
+  .svg-icon svg {
+    width: 26px;
+    height: 26px;
+    transform: translateY(-6px);
   }
 }
 
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index fddd84e049..c3df2cab2d 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -344,7 +344,7 @@
     align-items: center;
 
     .status__action-bar-button {
-      margin-right: 4px;
+      margin-right: 8px;
     }
 
     &__label {
@@ -355,15 +355,6 @@
       color: var(--brand-color);
     }
   }
-
-  .svg-icon {
-    width: 24px;
-    height: 20px;
-
-    svg {
-      stroke-width: 2px;
-    }
-  }
 }
 
 .status__action-bar-button {