Fix vertical alignment of custom emojis in display name

src/components/Post.vue

@@ -607,11 +607,14 @@ async function onMintToken() {
   }
 
   .display-name-link {
-    color: $text-color;
-    font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    .display-name {
+      color: $text-color;
+      font-weight: bold;
+    }
   }
 
   .actor-address {

src/components/PostContent.vue

@@ -84,8 +84,6 @@ function getContent(): string {
 @import "../styles/mixins";
 
 .post-content {
-  @include ugc-emoji;
-
   color: $text-color;
   line-height: 1.5;
   padding: $block-inner-padding;
@@ -162,6 +160,10 @@ function getContent(): string {
   }
 
   :deep(.emoji) {
+    height: 24px;
+    vertical-align: text-bottom;
+    width: 24px;
+
     &:hover {
       height: 48px;
       transition: 100ms linear;

src/components/ProfileDisplayName.vue

@@ -23,10 +23,17 @@ function getDisplayNameHtml(): string {
 </script>
 
 <style scoped lang="scss">
-@import "../styles/mixins";
 @import "../styles/theme";
 
+$display-name-line-height: 1.4;
+
 .display-name {
-  @include ugc-emoji;
+  line-height: $display-name-line-height;
+
+  :deep(.emoji) {
+    height: $display-name-line-height * 0.8em;
+    vertical-align: text-bottom;
+    width: $display-name-line-height * 0.8em;
+  }
 }
 </style>

src/styles/_mixins.scss

@@ -158,11 +158,3 @@
     color: $error-color;
   }
 }
-
-@mixin ugc-emoji {
-  :deep(.emoji) {
-    height: 24px;
-    vertical-align: text-bottom;
-    width: 24px;
-  }
-}