LHN - The number in the unread message counter is not vertically centered in the pill

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @roryabraham
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Log in to the account with unread messages
2. Check unread tub at the top of the page

Expected Result:

The number in the unread message counter is vertically centered in the pill

Actual Result:

The number in the unread message counter is not vertically centered in the pill

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @rojiphil

[MelvinBot]

Proposal

What is the root cause of that problem?

The count text in the LHN tab pill has a 9px font inside a 16px line box, inside a 14px content box. Native resolves that oversized line box asymmetrically, so the digit sits high.

Three styles combine in src/styles/index.ts:

Style	Line	Contribution
badgeText	1151	spreads lineHeightBadge → lineHeight: 16 on native
condensedBadgeText	1135	overrides fontSize to 9 — but never the inherited lineHeight
tabSelectorBadge	4825	height: 16, minus defaultBadge's borderWidth: 1 top and bottom = 14px content box

So a 16px line box is centered inside a 14px box, and the 9px digit is placed inside that line box by platform text code — not by flex. Web is fine because CSS splits the 7px of leading symmetrically. Native does not: iOS uses an approximate NSBaselineOffset correction and Android's CustomLineHeightSpan splits leading with ceil above / floor below, on top of includeFontPadding: true.

The repo already treats this as a known bug class — lineHeightBadge is literally a Safari-only patch for "vertical text offset in Safari for badges". isSafari() is hardcoded false on native, so iOS/Android never got the equivalent treatment.

Which PR introduced it, and supporting evidence

Likely regression: #95877 ("Fix styling of the Inbox page tabs to match Spend page", merged 2026-07-20). It added isBadgeCondensed: true to both Inbox tabs, flipping the badge from fontSize 11 / lineHeight 16 (ratio 1.45) to fontSize 9 / lineHeight 16 (ratio 1.78) while tabSelectorBadge.height stayed at 16 from #92146. That widened the mismatch enough for the platform divergence to be visible.

Render path:

• BaseSidebarScreen.tsx:53 renders <InboxTabSelector /> at the top of the LHN
• InboxTabSelector.tsx:89-106 sets isBadgeCondensed: true + badgeStyles: styles.tabSelectorBadge on both Unread and To-dos
• TabSelectorItem.tsx:106-113 renders <Badge>
• Badge.tsx:92-102 (container) and Badge.tsx:127-144 (text) compose the stacks

Two red herrings ruled out:

• tabSelectorBadge's justifyContent: 'center' does nothing vertically — defaultBadge sets flexDirection: 'row', so that's the horizontal axis. The only vertical centering is alignItems: 'center', which has zero slack against an over-tall line box.
• Larger OS font scale makes it worse, not better: lineHeightNormal is getValueUsingPixelRatio(16, 21) so it grows to 21, while fontSizeExtraSmall is a hard-coded 9 (variables.ts:62,166).

Prior art for the fix in this same file: buttonText ("It is needed to unset the line height… It allows to vertically center the text"), avatarInnerTextSmall, headerEnvBadgeText — all small chips that set lineHeight: undefined. There's even a ready-made lineHeightUndefined helper.

Not device-verified. This run's test platform was web, where the bug does not reproduce, so the conclusion rests on code reading plus the screenshots in this issue (the digit sits high in both the Android and iOS captures).

What changes do you think we should make in order to solve the problem?

Two small changes in src/styles/index.ts:

1. Unset the line height on condensedBadgeText (line 1135) — add lineHeight: undefined alongside the fontSize, exactly as buttonText, avatarInnerTextSmall and headerEnvBadgeText already do. The digit then centers on its own font metrics instead of inside a 16px box.
2. Change tabSelectorBadge.height: 16 to minHeight: 16 (line 4827) so the pill can't clip its own content once the OS font scale is above 1.

Scoping it to condensedBadgeText rather than badgeText keeps the blast radius to condensed badges. Verify on iOS and Android at both default and enlarged system font sizes, and check the other consumers of the same config: the To-dos tab (InboxTabSelector.tsx:100-106) and the Search narrow type menu (SearchTypeMenuNarrow.tsx:196-197), which should show the same defect today.

What alternative solutions did you explore? (Optional)

• Give condensedBadgeText an explicit small lineHeight (for example variables.lineHeightXSmall = 11) instead of unsetting it. This mirrors the existing Safari workaround and is more deterministic across fonts, but it hard-codes a value that has to track fontSizeExtraSmall.
• Bump tabSelectorBadge.height to 18 to absorb the two 1px borders. This stops the clipping but leaves the 9-vs-16 mismatch, so the digit would still sit off-center inside its line box.
• Add includeFontPadding: false for Android, as UserInitialsAvatar.tsx:19-21 does. Worth adding only if step 1 leaves a residual Android-specific offset.

Related issues

A search of open Expensify/App issues for this symptom found no duplicates or related reports.

💡 Suggested AI code review rule

This is the fifth place in src/styles/index.ts where someone has had to fight the same glyph-box-vs-container-box problem (buttonText, avatarInnerTextSmall, headerEnvBadgeText, the Safari lineHeightBadge patch, and now this), so it may be worth a coding-standards rule. Proposed for Expensify/App:

• Rule: UI-4 — Small text in a fixed-height chip must control its own line height
• Condition: When a style object overrides fontSize down to fontSizeExtraSmall or smaller, or is rendered inside a container with a fixed height of 24 or less, it must also set lineHeight (usually lineHeight: undefined, or styles.lineHeightUndefined). Inheriting a larger lineHeight from a base style makes the glyph render off-center on iOS and Android even though it looks correct on web.
• Why: RN resolves an oversized lineHeight asymmetrically on native (iOS approximates with NSBaselineOffset; Android's CustomLineHeightSpan splits leading ceil above / floor below), unlike CSS half-leading. A fixed container height is border-box in Yoga, so borders shrink the content box further and alignItems: 'center' has no slack left. Motivating bug: this issue.
• Search pattern: grep -n -A3 'fontSize: variables.fontSize\(ExtraSmall\|XXSmall\)' src/styles/index.ts and flag any match whose style block has no lineHeight key; plus container styles matching height: 1[0-9]\|height: 2[0-4] that also set alignItems: 'center'.
• Offending code (❌): condensedBadgeText and tabSelectorBadge
• Fix (✅): the pattern already used by headerEnvBadgeText

The full rule file, with the ❌/✅ code inline in App's coding-standards format (.claude/skills/coding-standards/rules/ui-4-*.md plus a UI bullet in SKILL.md), would go in Expensify/App itself. If it's worth adding, a maintainer can open it there as a draft PR.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/100397) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

---

view run · no recording available

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[Anthgg]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the LHN tab selector at the top of the sidebar (Unread / To-dos), the unread count badge pill renders the number vertically misaligned (shifted upwards toward the top border) rather than vertically centered on native platforms (iOS and Android).

What is the root cause of that problem?

1. Oversized inherited line height on condensed badges:
   In src/components/Badge.tsx (lines 129-140), text styles are composed as:

   [
       styles.badgeText,
       styles.textStrong,
       isCondensed && styles.condensedBadgeText,
       ...
   ]

   styles.badgeText (src/styles/index.ts line 1151) spreads ...lineHeightBadge, which resolves to lineHeight: variables.lineHeightNormal (16px, or 21px when pixel ratio scaling is applied).
   In InboxTabSelector.tsx, condensed badges are rendered for both the Unread tab (line 93) and To-dos tab (line 102) with isBadgeCondensed: true.
   styles.condensedBadgeText (src/styles/index.ts line 1135) reduces the font size to variables.fontSizeExtraSmall (9px), but does not override or unset the inherited 16px line height.

2. Asymmetric vertical placement in React Native:
   In React Native native layout (iOS NSBaselineOffset and Android CustomLineHeightSpan), placing a 9px glyph inside an oversized 16px line box within a tight container causes the text baseline to be pushed upward toward the top border. Unlike web browsers which distribute half-leading evenly, native resolves oversized line boxes with top bias.
   Furthermore, styles.tabSelectorBadge (src/styles/index.ts line 4825) enforces a fixed height: 16, leaving zero vertical tolerance inside the container.

---

What changes do you think we should make in order to solve the problem?

1. Unset line height in condensedBadgeText:
   In src/styles/index.ts (line 1135), unset lineHeight so that the condensed badge text centers based on its own font metrics rather than the oversized inherited line height (matching established patterns in buttonText, avatarInnerTextSmall, and headerEnvBadgeText):

   condensedBadgeText: {
       fontSize: variables.fontSizeExtraSmall,
       lineHeight: undefined,
   },

2. Relax fixed height on tabSelectorBadge:
   In src/styles/index.ts (line 4825), change height: 16 to minHeight: 16 in tabSelectorBadge:

   tabSelectorBadge: {
       minWidth: 18,
       minHeight: 16,
       marginLeft: 8,
       justifyContent: 'center',
   },

   This allows the pill container to expand gracefully if OS accessibility font scaling is enabled while keeping the digit perfectly vertically centered.

---

What alternative solutions did you explore? (Optional)

1. Setting an explicit small line height on condensedBadgeText (e.g. variables.lineHeightXSmall = 11). While functional, unsetting line height (lineHeight: undefined) is the standard practice across the codebase for micro-chips (buttonText, headerEnvBadgeText) as it allows native font metrics to align naturally across varying platform font renders.
2. Increasing container height: 18. This slightly mitigates top clipping, but without fixing the 9px-in-16px line box discrepancy, the digit remains vertically off-center within the pill.

[rojiphil]

MelvinBot's proposal LGTM i.e. Unsetting lineHeight in condensedBadgeText and changing tabSelectorBadge.height to minHeight: 16
@MelvinBot implement this to create a draft PR.

[MelvinBot]

🤖 Draft PR created: #100443

Please mark it as "Ready for review" when it is ready for review.

Implemented exactly the two changes you approved, both in src/styles/index.ts:

1. condensedBadgeText — added lineHeight: undefined next to the fontSize override, so the 9px digit centers on its own font metrics instead of inside the 16px line box inherited from badgeText. Same pattern already used by buttonText, avatarInnerTextSmall, and headerEnvBadgeText.
2. tabSelectorBadge — changed height: 16 to minHeight: 16, so the pill can't clip its content at an enlarged OS font scale. This also matches condensedBadge, which already uses minHeight: 16.

Tests run locally

All from the Expensify/App required-local bundle, plus the path-gated style check:

Check	Result
npm run lint-changed	✅ pass
npm run typecheck	✅ pass
npm run spell-changed	✅ pass
npm run gh-actions-unused-styles	✅ pass — no unused styles
npm run storybook -- --smoke-test --ci	✅ pass
npm test — tests/ui (247 suites)	✅ pass
npm test — tests/actions + tests/navigation (131 suites)	✅ pass
npm test — tests/unit (~972 suites, split into 4 chunks for the runner time limit)	✅ pass

Prettier ran through ESLint — this repo has no standalone prettier npm script.

One caveat worth flagging: the fix is not device-verified. This run's test platform was web, where the bug doesn't reproduce, and the browser session failed to render at all (blank page — a session failure unrelated to the change; the dev server rebuilt the file cleanly with no compile errors). Someone still needs to eyeball the pill on iOS Native and Android Native, at both default and enlarged OS font scale, before this ships.

Two other spots use the same badge config and should show the same improvement — worth checking in the same pass: the To-dos LHN tab (InboxTabSelector.tsx:104-105) and the Search narrow type menu (SearchTypeMenuNarrow.tsx:196-197).