diff --git a/app/javascript/mastodon/components/status/header.module.scss b/app/javascript/mastodon/components/status/header.module.scss index fcb4f616226..b1417ac1184 100644 --- a/app/javascript/mastodon/components/status/header.module.scss +++ b/app/javascript/mastodon/components/status/header.module.scss @@ -1,8 +1,6 @@ @use '@/styles/mastodon/mixins'; -// Header - -.header { +.root { display: grid; grid-template-columns: subgrid; grid-template-rows: 1fr; @@ -24,7 +22,7 @@ } } -.headerAvatar { +.avatar { padding-inline-end: var(--col-gap); > span { @@ -34,7 +32,7 @@ } } -.headerName { +.name { @include mixins.type-body; display: flex; @@ -42,10 +40,13 @@ } // Overrides .header a -a.headerNameLink { +a.nameLink { @include mixins.type-body-strong; color: var(--color-text-primary); + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; // Overrides .display-name > span { @@ -53,6 +54,13 @@ a.headerNameLink { } } -.headerHandle { - @include mixins.type-meta; +.date { + flex-shrink: 0; +} + +.handle { + @include mixins.type-meta; + + overflow: hidden; + text-overflow: ellipsis; } diff --git a/app/javascript/mastodon/components/status/header.tsx b/app/javascript/mastodon/components/status/header.tsx index 1e882074ff7..0c8a557fe26 100644 --- a/app/javascript/mastodon/components/status/header.tsx +++ b/app/javascript/mastodon/components/status/header.tsx @@ -54,7 +54,7 @@ export const StatusRedesignHeader: React.FC = ({ let displayName = ( @@ -102,18 +102,18 @@ export const StatusRedesignHeader: React.FC = ({ } return ( -
+
-

+

{displayName} • = ({ pathname: statusLink(status), state: { reference: 'status' }, }} + className={classes.date} >

-

+