fix(mobile): keep bottom-nav labels on one line in narrow windows

[iscekic]

Changelog for users

• The Android dev launcher keeps each bottom-tab label on one line; a label wider than its tab shrinks to fit instead of breaking mid-word.
• The app's bottom tab labels shrink to fit the single line the bar reserves, instead of wrapping into a clipped second line.
• Bottom-tab labels use two lines only at large accessibility font scales, where the bar grows to hold them.
• Screens stack their rows in windows narrower than 240 dp, so labels keep whole words: Preferences rows, the Credits header, the Kilo Pass card, and the Add credits row.
• In a narrow window the Kilo Pass card stacks its icon and action above the copy, and the copy keeps the card's full width.

Changelog for maintainers

• Review the new width threshold first: isNarrowLayout returns true below 240 dp and keeps the standard row for an unknown width; it now drives stacking in Preferences rows, the Credits header, the Kilo Pass card, and the Add credits row.
• tabLabelLineCount is now the single source for the label lines the tab bar reserves and the lines a label may render; review that getTabBarOverlayHeight and the tab layout both use it.
• Below the wrap font scale, tab labels use adjustsFontSizeToFit with a 0.75 floor and tail ellipsis; the two-line tabs.kiloclawWrapped label stays for large font scales.
• The Kilo Pass card body is one helper with a wide row and a narrow stack; the narrow loading placeholder reserves 114 px instead of 66 px, so the reveal does not move layout.
• A new pnpm patch for the debug-only expo-dev-launcher keeps its tab and header labels on one line; it measures laid-out widths because intrinsic measurement of a SubcomposeLayout crashes the launcher. Register the new patched dependency in the workspace and lockfile, and note the 0.667 label floor.
• New and updated unit tests cover narrow and phone widths for the four components and the new helpers; no translation catalog changed.

E2E proof

[e1] launcher-settings — Fresh android run at head 343234a on emulator-5554 in the declared state (night yes, battery 9/discharging, 480x1000 @ 480 = 160 dp); e1-launcher-settings.log shows each tab label as one text node (label text="Updates" bounds="[200,867][280,893]") with all three tab buttons sharing tops = 759 and bottoms 928, so no label wraps mid-word; capture launcher-settings.png is the visual reviewer's. Supplementary e1-app-tab-bar.log: icon-forward at 160 dp, HOME/AGENTS/PROFILE one line each at default geometry.

[e1] launcher-settings -> pass :: Fresh android run at head 343234a4 on emulator-5554 in the declared state (night yes, battery 9/discharging, 480x1000 @ 480 = 160 dp); e1-launcher-settings.log shows each tab label as one text node (label text="Updates" bounds="[200,867][280,893]") with all three tab buttons sharing tops = 759 and bottoms 928, so no label wraps mid-word; capture launcher-settings.png is the visual reviewer's. Supplementary e1-app-tab-bar.log: icon-forward at 160 dp, HOME/AGENTS/PROFILE one line each at default geometry.

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-proof-a70ec64-dd2e/e2e-mobile-app/e1-launcher-settings.log

# e1 launcher-settings (expo dev launcher bottom nav) - com.kilocode.kiloapp
# device: emulator-5554 (android). state: uimode night=yes; battery level 9 / ac 0 / status 3;
#         wm size override 480x1000; wm density override 480 -> 160dp x 333dp, dark.
# route: cold start -> dev menu (MENU key 82) -> tap 'Home' (go home) -> dev launcher -> Settings tab.
# source: appium hierarchy launcher-settings.xml (same moment as launcher-settings.png)
hierarchy width="480" height="1000"
tab Home     button bounds="[24,759][168,928]"  label text="Home" bounds="[55,867][137,904]"
tab Updates  button bounds="[168,759][312,928]"  label text="Updates" bounds="[200,867][280,893]"
tab Settings button bounds="[312,759][456,928]"  label text="Settings" bounds="[343,867][425,894]"
# each tab renders exactly one label text node (no second line node):
label Home     node height=37px bounds="[55,867][137,904]"
label Updates  node height=26px bounds="[200,867][280,893]"
label Settings node height=27px bounds="[343,867][425,894]"
# the three tab buttons share one vertical extent (no tab is taller from a
# wrapped second label line):
#   tops    = 759 for all three (buttons at x 24-168, 168-312, 312-456)
#   bottoms = 928 for all three
# one label line at this size is ~26-37 px tall; a mid-word wrap into a second
# line would roughly double a label node's height, which no node shows.

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-proof-a70ec64-dd2e/e2e-mobile-app/e1-app-tab-bar.log

# e1 supplementary - the app's own bottom tab bar (com.kilocode.kiloapp)
# captured at head 343234a4 on emulator-5554, dark mode.
#
# A. declared narrow state: wm size 480x1000; wm density 480 (160dp)
#    source: appium hierarchy e1-app-home-narrow-scene.xml (png e1-app-home-narrow.png)
#    the bar renders icon-forward: the three tab buttons keep their tab names as
#    content-desc and no visible label text node exists at this width.
content-desc="Home, tab, 1 of 3"
content-desc="Agents, tab, 2 of 3"
content-desc="Profile, tab, 3 of 3"
#
# B. default geometry restored: 1080x2400 @ density 420 (411dp)
#    source: appium hierarchy e1-app-home-default-scene.xml (png e1-app-home-default.png)
#    labels render whole, one line each (all three label nodes share y 2281-2320).
hierarchy width="1080" height="2400"
label text="HOME" bounds="[13,2281][347,2320]"
label text="AGENTS" bounds="[373,2281][707,2320]"
label text="PROFILE" bounds="[733,2281][1067,2320]"

Owner request

kwf-fix: proof-a70ec64

kwf-ready-through: 31663632611

kwf-fix-pr: #6481

Prove the behaviour of PR #6481 with a live end-to-end run, and make no code change.
The pull request description carries no evidence: the '## E2E proof' section shows no screenshot, and this change has a visible surface.

Run the pull request's own scenarios on a device or a simulator, for every platform its diff touches. Capture the decisive log lines always, and a screenshot as well for a user-visible change. Never a recording: they are gone (owner, 2026-09-16).
Write the evidence under a '## E2E proof' heading in your own pull request description. Never run gh: the driver publishes.
If a scenario fails, name it and say why, and still change no product code: this section proves what the branch already carries.

The pull request description as it stands now

This is the live body; you never need to fetch it, and you must not edit it. The driver merges what your final summary says into it.

## Changelog for users

- The Android dev launcher keeps each bottom-tab label on one line; a label wider than its tab shrinks to fit instead of breaking mid-word.
- The app's bottom tab labels shrink to fit the single line the bar reserves, instead of wrapping into a clipped second line.
- Bottom-tab labels use two lines only at large accessibility font scales, where the bar grows to hold them.
- Screens stack their rows in windows narrower than 240 dp, so labels keep whole words: Preferences rows, the Credits header, the Kilo Pass card, and the Add credits row.
- In a narrow window the Kilo Pass card stacks its icon and action above the copy, and the copy keeps the card's full width.

## Changelog for maintainers

- Review the new width threshold first: `isNarrowLayout` returns true below 240 dp and keeps the standard row for an unknown width; it now drives stacking in Preferences rows, the Credits header, the Kilo Pass card, and the Add credits row.
- `tabLabelLineCount` is now the single source for the label lines the tab bar reserves and the lines a label may render; review that `getTabBarOverlayHeight` and the tab layout both use it.
- Below the wrap font scale, tab labels use `adjustsFontSizeToFit` with a 0.75 floor and tail ellipsis; the two-line `tabs.kiloclawWrapped` label stays for large font scales.
- The Kilo Pass card body is one helper with a wide row and a narrow stack; the narrow loading placeholder reserves 114 px instead of 66 px, so the reveal does not move layout.
- A new pnpm patch for the debug-only expo-dev-launcher keeps its tab and header labels on one line; it measures laid-out widths because intrinsic measurement of a `SubcomposeLayout` crashes the launcher. Register the new patched dependency in the workspace and lockfile, and note the 0.667 label floor.
- New and updated unit tests cover narrow and phone widths for the four components and the new helpers; no translation catalog changed.

## E2E proof — log excerpts





## Open findings (not fixed here)
- the '## E2E proof' section shows no screenshot, and this change has a visible surface

<details>
<summary>Owner request</summary>

> Explorer finding: launcher-settings: The bottom-nav labels again break mid-word into two lines ('Upda tes', 'Settin gs') inside the selected-tab pill.
> 
> The user-agent explorer found this while using the app like a user.
> One finding per item; the explorer never edits product code.
> 
> Flow: launcher-settings
> Found on revision: f2181ae79
> 
> Repro:
> 1. set this state first: uimode night; battery 9 discharging; size 480x1000; density 480; relaunch; back; deeplink kiloapp://home; the device in dark mode
> 2. open the app on emulator-5554
> 3. reach launcher-settings
> 4. the capture shows the defect named below
> 
> Observed: The bottom-nav labels again break mid-word into two lines ('Upda tes', 'Settin gs') inside the selected-tab pill.
> Expected: the screen renders without this defect
> 
> Evidence (from the device run):

</details>

## Open findings (not fixed here) - the '## E2E proof' section shows no screenshot, and this change has a visible surface

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

The branch was force-pushed onto a newer main (b2079aad is no longer an ancestor of a70ec644c), so this was re-run as a full review of gh pr diff 6481. The narrow-window stacking (isNarrowLayout) and the single-line tab-label contract (tabLabelLineCount) are internally consistent across the four components and the tab layout, the previously flagged documentation-boundary and mock-gap items are resolved, and no new changed-code defects were found.

Files Reviewed (18 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/add-credits-row.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
• apps/mobile/src/components/profile-credits-card.mounted.test.tsx
• apps/mobile/src/components/profile-credits-card.tsx
• apps/mobile/src/components/ui/configure-row.mounted.test.tsx
• apps/mobile/src/components/ui/configure-row.tsx
• apps/mobile/src/components/ui/segmented-control.tsx
• apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx
• apps/mobile/src/lib/narrow-layout.test.ts
• apps/mobile/src/lib/narrow-layout.ts
• apps/mobile/src/lib/tab-bar-layout.test.ts
• apps/mobile/src/lib/tab-bar-layout.ts
• patches/expo-dev-launcher@57.0.19.patch
• pnpm-lock.yaml
• pnpm-workspace.yaml

Previous Review Summaries (5 snapshots, latest commit b2079aa)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit b2079aa)

Status: No Issues Found | Recommendation: Merge

Executive Summary

The narrow-window stacking and one-line tab-label changes are internally consistent: isNarrowLayout and tabLabelLineCount are the single sources for each layout decision, the four components consume them, and the new suites exercise narrow and phone widths. The previously raised minimumFontScale documentation finding is resolved in this revision, and no new changed-code defects were found.

Files Reviewed (18 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/add-credits-row.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
• apps/mobile/src/components/profile-credits-card.mounted.test.tsx
• apps/mobile/src/components/profile-credits-card.tsx
• apps/mobile/src/components/ui/configure-row.mounted.test.tsx
• apps/mobile/src/components/ui/configure-row.tsx
• apps/mobile/src/components/ui/segmented-control.tsx
• apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx
• apps/mobile/src/lib/narrow-layout.test.ts
• apps/mobile/src/lib/narrow-layout.ts
• apps/mobile/src/lib/tab-bar-layout.test.ts
• apps/mobile/src/lib/tab-bar-layout.ts
• patches/expo-dev-launcher@57.0.19.patch
• pnpm-lock.yaml
• pnpm-workspace.yaml

Previous review (commit a9075a8)

Status: No Issues Found | Recommendation: Merge

Executive Summary

No new changed-code defects in this revision. The two documentation-boundary suggestions carried by the prior review are now consistent with the strict predicates (narrow-layout.ts says 'below which'; tab-bar-layout.ts says 'Below the wrap threshold' / 'Above the threshold'), and the user.getCreditBlocks mock gap is fixed and exercised by the new store-management test.

Files Reviewed (18 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/add-credits-row.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
• apps/mobile/src/components/profile-credits-card.mounted.test.tsx
• apps/mobile/src/components/profile-credits-card.tsx
• apps/mobile/src/components/ui/configure-row.mounted.test.tsx
• apps/mobile/src/components/ui/configure-row.tsx
• apps/mobile/src/components/ui/segmented-control.tsx
• apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx
• apps/mobile/src/lib/narrow-layout.test.ts
• apps/mobile/src/lib/narrow-layout.ts
• apps/mobile/src/lib/tab-bar-layout.test.ts
• apps/mobile/src/lib/tab-bar-layout.ts
• patches/expo-dev-launcher@57.0.19.patch
• pnpm-lock.yaml
• pnpm-workspace.yaml

Previous review (commit 4d2e65c)

Status: 2 Issues Found | Recommendation: Address before merge

Executive Summary

No new issues in the incremental diff: the previously flagged user.getCreditBlocks mock gap is fixed and now covered by a store-management test. The two documentation-boundary suggestions from the prior review remain valid and unfixed.

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	2

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
apps/mobile/src/lib/narrow-layout.ts	2	Docstring says 'at or below', but isNarrowLayout is strictly below the 240 dp threshold (test and sibling comments pin the strict form)
apps/mobile/src/lib/tab-bar-layout.ts	33	Comment says 'At/above the threshold', but tabLabelLineCount is strictly above TAB_LABEL_WRAP_FONT_SCALE (1.8 returns 1)

Files Reviewed (18 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/account-settings-screen.arabic.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.tsx
• apps/mobile/src/components/agents/session-list-header-actions.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
• apps/mobile/src/components/profile-credits-card.mounted.test.tsx
• apps/mobile/src/components/profile-credits-card.tsx
• apps/mobile/src/components/ui/configure-row.mounted.test.tsx
• apps/mobile/src/components/ui/configure-row.tsx
• apps/mobile/src/lib/narrow-layout.test.ts
• apps/mobile/src/lib/narrow-layout.ts
• apps/mobile/src/lib/tab-bar-layout.test.ts
• apps/mobile/src/lib/tab-bar-layout.ts
• patches/expo-dev-launcher@57.0.19.patch
• pnpm-lock.yaml
• pnpm-workspace.yaml

Fix these issues in Kilo Cloud

Previous review (commit b80a5e5)

Status: 2 Issues Found | Recommendation: Address before merge

Executive Summary

No new issues in the incremental diff: the previously flagged user.getCreditBlocks mock gap is fixed and now covered by a store-management test. The two documentation-boundary suggestions from the prior review remain valid and unfixed.

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	2

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
apps/mobile/src/lib/narrow-layout.ts	2	Docstring says 'at or below', but isNarrowLayout is strictly below the 240 dp threshold (test and sibling comments pin the strict form)
apps/mobile/src/lib/tab-bar-layout.ts	33	Comment says 'At/above the threshold', but tabLabelLineCount is strictly above TAB_LABEL_WRAP_FONT_SCALE (1.8 returns 1)

Files Reviewed (18 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/account-settings-screen.arabic.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.mounted.test.tsx
• apps/mobile/src/components/add-credits-row.tsx
• apps/mobile/src/components/agents/session-list-header-actions.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx
• apps/mobile/src/components/profile-credits-card.mounted.test.tsx
• apps/mobile/src/components/profile-credits-card.tsx
• apps/mobile/src/components/ui/configure-row.mounted.test.tsx
• apps/mobile/src/components/ui/configure-row.tsx
• apps/mobile/src/lib/narrow-layout.test.ts
• apps/mobile/src/lib/narrow-layout.ts
• apps/mobile/src/lib/tab-bar-layout.test.ts
• apps/mobile/src/lib/tab-bar-layout.ts
• patches/expo-dev-launcher@57.0.19.patch
• pnpm-lock.yaml
• pnpm-workspace.yaml

Fix these issues in Kilo Cloud

Previous review (commit a78e3fa)

Status: 3 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	3

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
apps/mobile/src/lib/narrow-layout.ts	2	Docstring says 'at or below', but isNarrowLayout is strictly below the 240 dp threshold (test and sibling comments pin the strict form)
apps/mobile/src/lib/tab-bar-layout.ts	33	Comment says 'At/above the threshold', but tabLabelLineCount is strictly above TAB_LABEL_WRAP_FONT_SCALE (1.8 returns 1)
apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx	53	tRPC mock omits user.getCreditBlocks.pathFilter(), which invalidateKiloPassState reads (kilo-pass-subscription-card.tsx:80); latent TypeError on any store-management-path test

Files Reviewed (16 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx - no issues
• apps/mobile/src/lib/narrow-layout.ts - 1 issue
• apps/mobile/src/lib/narrow-layout.test.ts - no issues
• apps/mobile/src/lib/tab-bar-layout.ts - 1 issue
• apps/mobile/src/lib/tab-bar-layout.test.ts - no issues
• apps/mobile/src/components/add-credits-row.tsx - no issues
• apps/mobile/src/components/add-credits-row.mounted.test.tsx - no issues
• apps/mobile/src/components/ui/configure-row.tsx - no issues
• apps/mobile/src/components/ui/configure-row.mounted.test.tsx - no issues
• apps/mobile/src/components/profile-credits-card.tsx - no issues
• apps/mobile/src/components/profile-credits-card.mounted.test.tsx - no issues
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.tsx - no issues
• apps/mobile/src/components/kilo-pass/kilo-pass-subscription-card.narrow.mounted.test.tsx - 1 issue
• patches/expo-dev-launcher@57.0.19.patch - no issues (no regression in the shrink-to-fit guards or the NewText import removal; note that the patch targets published package sources that are not in this repo, so apply-on-install is unverified here)
• pnpm-workspace.yaml - no issues
• pnpm-lock.yaml - no issues

Verified clean in the changed lines: no new listeners, timers, or subscriptions (the useWindowDimensions calls are RN-managed and no renderer roots are retained), hooks all run before the early null returns, the narrow/wide branches are mutually exclusive so the shared iconTile element is never mounted twice, and the Kilo Pass placeholder arithmetic matches the narrow skeleton (24 + 40 + 2 + 8 + 12 + 16 + 12 = 114). The E2E proof in the PR body contains no device evidence for a change with a visible surface, so the rendered result is not independently confirmed by this review.

Fix these issues in Kilo Cloud

---

_{Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0}

_{Review guidance: REVIEW.md from base branch main}

[iscekic]

kilo-review — independent audit of the published diff.

Status: 1 Issues

File	Line	Issue
apps/mobile/src/app/(app)/(tabs)/_layout.tsx	89	minimumFontScale is not implemented on Android in RN 0.86.3, so the documented 0.75 shrink floor and tail ellipsis for tab labels hold on iOS only.

[iscekic]

bot: Accepted. Pushed 390f84a (kwf kwf-fix-review-dcbf).

What changed:

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx:89 — accepted: RN implements minimumFontScale on iOS only, so the 0.75 cap never bounds Android's shrink. The label docs now state that Android's autosize floors at RN's platform minimum, while the one-line pin and tail ellipsis hold on both platforms. A new unit suite pins the guarantee to the width rule, which drops a label before any shrink below the floor is needed. No render behavior changed.
• Review the width threshold first: isNarrowLayout returns true below 240 dp and keeps the standard row for an unknown width; it drives stacking in Preferences rows, the Credits header, the Kilo Pass card, and the Add credits row.
• tabLabelLineCount is the single source for the label lines the bar reserves and the lines a label may render; review that getTabBarOverlayHeight and the tab layout both use it.
• Below the wrap font scale, tab labels pin to one line and ask the platform to shrink and tail-truncate; the two-line tabs.kiloclawWrapped label stays for large font scales.
• The Kilo Pass card body is one helper with a wide row and a narrow stack; the narrow loading placeholder reserves 114 px instead of 66 px, so the reveal does not move layout.
• A new pnpm patch for the debug-only expo-dev-launcher keeps its tab and header labels on one line; it measures laid-out widths because intrinsic measurement of a SubcomposeLayout crashes the launcher. Register the new patched dependency in the workspace and lockfile, and note the 0.667 label floor.
• New and updated unit tests cover narrow and phone widths for the four components, the label shrink-floor contract, and the new helpers; no translation catalog changed.

[iscekic]

This description names a scenario the proof did not capture:

• not proved live: launcher-settings.png is no longer on the host that took it, so no publish can carry it

A repeated proof run rebuilds the same evidence, so no proof run is dispatched for a named gap. Merging with this gap open is your decision.

[iscekic]

This description names a scenario the proof did not capture:

• not proved live: launcher-settings.png is no longer on the host that took it, so no publish can carry it

A repeated proof run rebuilds the same evidence, so no proof run is dispatched for a named gap. Merging with this gap open is your decision.