Use snug leading for the notification author name
The author name link was the only `leading_tight` fragment in the notification text. It is also the paragraph's first fragment, and TextKit takes paragraph line metrics from the paragraph's first character, so it set the line height for the whole block: every line laid out at 17pt instead of the 20pt the surrounding text asks for (measured 51px line spacing at @3x). That also squeezed the inline badges. At 17pt the ascent budget is 13.4pt, less than the 14pt badge box, so TextKit had to shift the attachment up to make it fit and the box bottom no longer landed on the baseline. With snug leading the ascent budget is 16.4pt and the box sits where `RCTTextLayoutManager` puts it, which is what the cap-height sizing assumes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pgeau3P52qsMTcnDeJm8Zn
This commit is contained in:
@@ -113,7 +113,9 @@ export function ProfileBadges({
|
|||||||
* The box height is the only lever left, so constrain it to the cap height of
|
* The box height is the only lever left, so constrain it to the cap height of
|
||||||
* the surrounding text. That lands the box exactly over the capital letters,
|
* the surrounding text. That lands the box exactly over the capital letters,
|
||||||
* and `align_center` then centers the badges on them - independent of which
|
* and `align_center` then centers the badges on them - independent of which
|
||||||
* badges are visible and how tall they are.
|
* badges are visible and how tall they are. Keeping the box this short also
|
||||||
|
* keeps it inside the line's ascent, so TextKit never has to shift it to make
|
||||||
|
* it fit, which is what the badges' full height used to force.
|
||||||
*/
|
*/
|
||||||
const inlineHeight =
|
const inlineHeight =
|
||||||
IS_IOS && inlineFontSize
|
IS_IOS && inlineFontSize
|
||||||
|
|||||||
@@ -247,7 +247,13 @@ let NotificationFeedItem = ({
|
|||||||
t.atoms.text,
|
t.atoms.text,
|
||||||
a.font_semi_bold,
|
a.font_semi_bold,
|
||||||
a.text_md,
|
a.text_md,
|
||||||
a.leading_tight,
|
/*
|
||||||
|
* Must match the leading of the surrounding text. On iOS the whole
|
||||||
|
* paragraph takes its line metrics from the first character, so a
|
||||||
|
* tighter leading here silently compressed every line of the
|
||||||
|
* notification.
|
||||||
|
*/
|
||||||
|
a.leading_snug,
|
||||||
web({direction: 'ltr', unicodeBidi: 'isolate'}),
|
web({direction: 'ltr', unicodeBidi: 'isolate'}),
|
||||||
]}
|
]}
|
||||||
to={firstAuthor.href}
|
to={firstAuthor.href}
|
||||||
|
|||||||
Reference in New Issue
Block a user