diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 3ee22b608..dfe8619ea 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/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 { diff --git a/app/javascript/flavours/glitch/styles/gts/sizes.scss b/app/javascript/flavours/glitch/styles/gts/sizes.scss index 767391d37..4dc4d3195 100644 --- a/app/javascript/flavours/glitch/styles/gts/sizes.scss +++ b/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; } diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss b/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss index 1bddc3068..11671c398 100644 --- a/app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss +++ b/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; }