diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx index 67e3b2f9b8..bf7a51deb5 100644 --- a/src/components/ProfileHoverCard/index.web.tsx +++ b/src/components/ProfileHoverCard/index.web.tsx @@ -519,7 +519,6 @@ function Inner({ a.leading_snug, a.font_semi_bold, a.self_start, - {minWidth: 0}, ]}> {sanitizeDisplayName( profile.displayName || sanitizeHandle(profile.handle), diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx index a33eaf1536..04b5e5499d 100644 --- a/src/components/Typography.tsx +++ b/src/components/Typography.tsx @@ -108,6 +108,10 @@ export function P({style, ...rest}: TextProps) { const numberOfLinesClippingFix = { overflowY: 'visible', overflowX: 'clip', + // mimic browser default behavior of `min-width: 0` on `overflow: hidden` + // elements to allow text to shrink smaller than its intrinsic width when + // necessary + minWidth: 0, // this is neater and supports vertical writing modes, but it's only baseline newly available // overflowInline: 'clip', } satisfies React.CSSProperties as TextStyleProp diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index ae1657a926..c5f56e895e 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -82,16 +82,9 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { /> )} - + - + { t.atoms.text_contrast_medium, a.leading_tight, {flexShrink: 10}, - web({minWidth: 0}), ]}> {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}