Status: fix annoying height difference when doing an emoji react

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);
   }
 }
 

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 {