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:
Claude
2026-07-25 09:48:22 +00:00
parent 8b06b18cd5
commit 34d347400a
2 changed files with 10 additions and 2 deletions
+3 -1
View File
@@ -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}