fix(mobile): keep bottom-tab labels on one line and truncate at the tail

[iscekic]

Changelog for users

• Bottom navigation labels no longer break in the middle of a word.
• A label too wide for its tab stays on one line and ends with a tail ellipsis.
• The KiloClaw tab keeps its deliberate two-line "Kilo / Claw" label at large text sizes.

Changelog for maintainers

• Every tab label now renders through one shared label component; the focused and muted styling is unchanged.
• Label line count comes from tabLabelNumberOfLines: two lines only when the copy itself carries a newline.
• Overflow now ellipsizes at the tail instead of wrapping a single word onto a second line.
• tabs.kiloclawWrapped is the only copy that reaches two lines, and only above the existing label-wrap font scale.
• The label text stays out of the accessibility tree, so each tab button still announces the full name and position.
• Unit and mounted layout tests cover fitting, wider-than-tab, and explicit-break labels.
• Device proof covers the reported dark, 480x1000, density-480 config; the truncation path is covered by those tests.
• Review hint: start at the line-count helper and the shared label component.

E2E proof

[e3] ux-check: Reported config (dark mode, 480x1000 / density 480, Home tab): every visible bottom-tab label sits on a single line; no label is split mid-word (no 'Hom e' / 'Upda tes' / 'Settin gs'… — android emulator-5606, signed-in Home with the reported config applied (uimode night yes, wm size override 480x1000, wm density override 480; hierarchy root width=480 height=1000): all three visible labels are single 44 px-tall nodes inside their 160 px tab cells - e3-labels.log has 'android.widget.TextView text=HOME bounds=[15,865][145,909]', "text='AGENTS' bounds=[175,865][305,909]", "text='PROFILE' bounds=[335,865][465,909]" - so no label is split mid-word; screenshot e3-home-darksmall.png, digest e3-home-darksmall.txt. Caveat: at this width each label (130 px) fits its cell (160 px), so…

[e5] ux-check: TalkBack announces the full tab name for a truncated label — android/emulator-5604, TalkBack ON (e5-talkback-on.txt switch checked="true"; e5-talkback-speech.log: marvin.talkback TTS synthesis requests): e5-a11y.log quotes each tab node as content-desc="Home, tab, 1 of 3"/"Agents, tab, 2 of 3"/"Profile, tab, 3 of 3" with clickable="true" focusable="true", and each label node as text="HOME"/"AGENTS"/"PROFILE" focusable="false" with no content-desc, so the announced name is the tab button's full name and the label is not a focus target (e5-home-talkback.txt). Gap: no reachable device state truncates a label (three base tabs fit at max font/display size…

E2E proof — log excerpts

[e1] ux-check: Reported config: any label too wide for its tab ends in a visible -> pass :: jev read the digest: pass (confidence 0.97)

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-app-home-dark-small-the-bottom-nav-labels-break-155c33-0315/e2e-mobile-app/scripted-e1.log

SCENE e1 OK
android.widget.LinearLayout com.kilocode.kiloapp:id/action_bar_root tappable [0,0][1080,2400]
android.widget.FrameLayout android:id/content tappable [0,0][1080,2400]
android.view.View Kilo tappable [58,84][1022,189]
android.widget.TextView LIVE NOW tappable [36,217][537,254]
android.widget.Button See all tappable [555,216][1043,255]
android.widget.TextView SEE ALL tappable [555,216][1043,255]
android.widget.TextView Nothing running right now tappable [348,363][732,409]
android.widget.Button New coding task tappable [37,537][1043,653]
android.widget.TextView New coding task tappable [450,571][696,617]
android.widget.Button New task from a picture tappable [37,671][1043,787]
android.widget.TextView New task from a picture tappable [396,705][749,751]
android.widget.TextView EXPLORE tappable [36,822][1044,859]
android.widget.Button Code Reviewer, Automatic PR reviews tappable [37,878][1043,990]
android.widget.TextView Code Reviewer tappable [171,906][953,952]
android.widget.TextView Automatic PR reviews tappable [171,956][953,990]
android.view.View Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.widget.TextView HOME tappable [13,2281][347,2320]
android.view.View Agents, tab, 2 of 3 tappable [360,2195][720,2337]
android.widget.TextView AGENTS tappable [373,2281][707,2320]
android.view.View Profile, tab, 3 of 3 tappable [720,2195][1080,2337]
android.widget.TextView PROFILE tappable [733,2281][1067,2320]

Owner request

Explorer finding: app-home-dark-small: The bottom-nav labels break mid-word into two lines ('Hom e', 'Upda tes', 'Settin gs'), leaving the navigation unreadable at this width.

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: app-home-dark-small
Found on revision: f2181ae

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 app-home-dark-small
4. the capture shows the defect named below

Observed: The bottom-nav labels break mid-word into two lines ('Hom e', 'Upda tes', 'Settin gs'), leaving the navigation unreadable at this width.
Expected: the screen renders without this defect

Evidence (from the device run):

Follow-ups (not changed here)

• not proved live: app-home-dark-small at large text: same device state as the previous scenario (wm size 480x1000, wm density 480, cmd uimode night yes) plus KILO_E2E_FONT_SCALE=1.35; a label wider than its 53dp tab (PROFILE is about 64dp at this text size) renders on ONE line with a tail ellipsis - before the fix it wrapped as 'PROFIL' + 'E'. Expected: one line per label, every label ellipsized at the tail rather than split mid-word, and the bar's reserved height still covers the label so nothing above it is overlapped. Restore KILO_E2E_FONT_SCALE=1.0, wm size reset, wm density reset, cmd uimode night no afterwards. (no capture cited it)
• not proved live: app-home-dark-small labels render whole at the finding's geometry: before the scene set the shared Android emulator with adb shell wm size 480x1000, adb shell wm density 480 and adb shell cmd uimode night yes (160dp wide, dark), signed in on Home: the three bottom-nav labels each render as one whole word on one line, no label is split across two lines, and the bar stays a single row with its icons and labels aligned. Restore the device afterwards with adb shell wm size reset, adb shell wm density reset, adb shell cmd uimode night no (the device is shared). Expected: no mid-word break; the navigation is readable. (no capture cited it)
• not proved live: ux-check: Reported config: any label too wide for its tab ends in a visible trailing ellipsis, stays inside its tab cell, and does not change the tab bar height, the icon row, or the focused-tab highlight position. (no capture cited it)
• not proved live: ux-check: With TalkBack on, focusing a tab whose label is truncated announces the full tab name (e.g. 'Home, tab 1 of 3'), not the ellipsized text. (no capture cited it)

Open findings (not fixed here)

• not proved live: app-home-dark-small.png is no longer on the host that took it, so no publish can carry it

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

Reviewed the mobile bottom-tab label refactor (shared TabBarLabel, tabLabelNumberOfLines, _layout.tsx wiring, and new unit/mounted tests) at HEAD 35ca2ae; no correctness, security, or memory-leak issues found.

The fix routes every label through one shared component with ellipsizeMode="tail" and a line count derived from an explicit \n, which removes the mid-word wrap without changing the focused/muted styling or the tab button's accessibility name. The overlay-height helper in unchanged lines still reserves two lines above TAB_LABEL_WRAP_FONT_SCALE, so the bar keeps covering the label at large text scales. No new subscriptions or retained references were introduced, and the mounted test unmounts its renderer in afterEach, so no leak surface was added.

Files Reviewed (5 files)

• apps/mobile/src/app/(app)/(tabs)/_layout.tsx
• apps/mobile/src/components/tab-bar-label.tsx
• apps/mobile/src/components/tab-bar-label.mounted.test.tsx
• apps/mobile/src/lib/tab-bar-layout.ts
• apps/mobile/src/lib/tab-bar-layout.test.ts

---

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

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

[iscekic]

This description names a scenario the proof did not capture:

• not proved live: app-home-dark-small at large text: same device state as the previous scenario (wm size 480x1000, wm density 480, cmd uimode night yes) plus KILO_E2E_FONT_SCALE=1.35; a label wider than its 53dp tab (PROFILE is about 64dp at this text size) renders on ONE line with a tail ellipsis - before the fix it wrapped as 'PROFIL' + 'E'. Expected: one line per label, every label ellipsized at the tail rather than split mid-word, and the bar's reserved height still covers the label so nothing above it is overlapped. Restore KILO_E2E_FONT_SCALE=1.0, wm size reset, wm density reset, cmd uimode night no afterwards. (no capture cited 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.

[eshurakov]

Approved after a shallow triage pass. No blocking findings.