[bugfix] improve display name alignment

app/javascript/flavours/glitch/styles/components/status.scss

@@ -561,9 +561,8 @@ a.status__display-name,
 
 .status__avatar {
   flex: none;
-  margin-inline-end: 10px;
-  height: 48px;
-  width: 48px;
+  height: var(--size-avatar);
+  width: var(--size-avatar);
 }
 
 .muted {

app/javascript/flavours/glitch/styles/gts/sizes.scss

@@ -1,7 +1,5 @@
 /* 📏 Sizes */
 :root {
-    --size-icon: 20px;
-
     /* Layout: larger elements, mostly containers */
     --size-layout-gap: 10px;
     --size-layout-radius: 8px;
@@ -9,4 +7,8 @@
     /* UI: smaller elements such as form elements and icons */
     --size-ui-gap: 5px;
     --size-ui-radius: 6px;
+
+    /* Components */
+    --size-avatar: 46px;
+    --size-icon: 20px;
 }

app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss

@@ -1,6 +1,6 @@
 /* 🚥 Status: Display name */
 .status__display-name {
-    align-self: start;
+    align-self: center;
     justify-self: start;
     color: var(--color-content-fg);
     font-size: 15px;
@@ -12,6 +12,12 @@
         text-overflow: clip;
     }
 
+    .display-name__html,
+    .display-name__account {
+        display: block;
+        line-height: max(22px, 1.4em);
+    }
+
     .display-name__html {
         font-weight: 700;
     }