Skip to content

fix(mobile): align home section header action at the row end in RTL - #6352

Open
iscekic wants to merge 1 commit into
mainfrom
kwf/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e
Open

iscekic wants to merge 1 commit into
mainfrom
kwf/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e

Conversation

@iscekic

@iscekic iscekic commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator

Changelog for users

  • Home section headers place the "See all" action at the row's end in both left-to-right and right-to-left layouts.
  • In Arabic, the section title sits at the right inset and "عرض الكل" at the left inset, matching the Agents tab header.
  • In English, the title stays left and "See all" stays at the right inset, unchanged.

Changelog for maintainers

  • The action pressable is now a flex-row with justify-end, so its placement follows the layout direction.
  • Removed the physical text-left/text-right alignment that React Native swaps under RTL on Android.
  • The action text no longer branches on I18nManager.isRTL; the component drops its I18nManager and cn imports.
  • Layout tests now assert the action box is a flex-row ending at justify-end in both directions.
  • A new test asserts no physical text-alignment class is present in either direction.
  • Check the Home header in Arabic first; the fix relies on direction-relative flexbox, not physical alignment.

E2E proof

[e1] Arabic (RTL) device: on Home, the 'Live now' section header shows its title flush with the right inset and 'عرض الكل' flush with the left inset, at the same edge as the Agents tab's section-header… — android emulator-5554, app language set to Arabic (RTL) via Profile > Preferences > Account > Language; the Home digest (e1-scene.log) shows the title 'الجلسات الجارية الآن' box [496,282][1044,328] with right edge 1044 flush to the Home content right edge 1043 and 'عرض الكل' [37,281][160,330] with left edge 37 at the Home content left inset, and the Agents tab count 'الجلسات النشطة: 0' [209,149][1024,195] (e1-agents-rtl.xml) is likewise right-anchored in RTL, so the header is no longer mirrored; screenshots e1.png/e1-home-rtl.png for the visual reviewer; no UX-DEFECT on Home/Agents RTL.

[e1] Arabic (RTL) device: on Home, the 'Live now' section header shows its title flush with the right inset and 'عرض الكل' flush with the left inset, at the same edge as the Agents tab's section-header… — e2e-mobile-app/e1-home-rtl.png

[e2] English (LTR) device: on Home, 'Live now' stays left and 'See all' stays flush with the right inset (no regression). — Platform android (emulator-5604), signed in as the default e2e account; state e2-home.log shows SCENE e2 OK with digest nodes 'LIVE NOW' [36,282][537,319] (left bound 36 = the 36/37 left inset of sibling rows) and 'SEE ALL' [897,281][1043,320] (right bound 1043 = the 1043/1044 right edge of sibling full-width rows) on a 1080 px screen, so on this LTR Home the label sits at the left inset and the action copy at the row end; the tab round-trip replay (e2-replay.log, e2.replay.json) reports identical bounds, so no layout shift on data re-arrival; screenshot e2.png captured for the visual…

[e2] English (LTR) device: on Home, 'Live now' stays left and 'See all' stays flush with the right inset (no regression). — e2e-mobile-app/e2.png

[e3] Tap 'See all'/'عرض الكل' on Home in either language: the Agents tab opens as before. — android emulator-5554; English (device language) Home, tapping 'See all' opened the Agents tab (digest after the tap shows '0 LIVE', 'Agents', 'See all' in e3-en-scene.log), and the same holds in Arabic where tapping 'عرض الكل' opened the Agents tab (e3-scene.log digest shows 'الجلسات النشطة: 0', 'الوكلاء'); screenshots e3.png (English Agents), e3-ar.png (Arabic Agents), e3-home-en.png; no UX-DEFECT.

[e3] Tap 'See all'/'عرض الكل' on Home in either language: the Agents tab opens as before. — e2e-mobile-app/e3-home-en.png

[e3] Tap 'See all'/'عرض الكل' on Home in either language: the Agents tab opens as before.

[e3] Tap 'See all'/'عرض الكل' on Home in either language: the Agents tab opens as before. — e2e-mobile-app/e3.png

E2E proof — log excerpts

[e1] Arabic (RTL) device: on Home, the 'Live now' section header shows its title -> pass :: android emulator-5554, app language set to Arabic (RTL) via Profile > Preferences > Account > Language; the Home digest (e1-scene.log) shows the title 'الجلسات الجارية الآن' box [496,282][1044,328] with right edge 1044 flush to the Home content right edge 1043 and 'عرض الكل' [37,281][160,330] with left edge 37 at the Home content left inset, and the Agents tab count 'الجلسات النشطة: 0' [209,149][1024,195] (e1-agents-rtl.xml) is likewise right-anchored in RTL, so the header is no longer mirrored; screenshots e1.png/e1-home-rtl.png for the visual reviewer; no UX-DEFECT on Home/Agents RTL.
[e3] Tap 'See all'/'عرض الكل' on Home in either language: the Agents tab opens a -> pass :: android emulator-5554; English (device language) Home, tapping 'See all' opened the Agents tab (digest after the tap shows '0 LIVE', 'Agents', 'See all' in e3-en-scene.log), and the same holds in Arabic where tapping 'عرض الكل' opened the Agents tab (e3-scene.log digest shows 'الجلسات النشطة: 0', 'الوكلاء'); screenshots e3.png (English Agents), e3-ar.png (Arabic Agents), e3-home-en.png; no UX-DEFECT.
[e2] English (LTR) device: on Home, 'Live now' stays left and 'See all' stays fl -> pass :: Platform android (emulator-5604), signed in as the default e2e account; state e2-home.log shows SCENE e2 OK with digest nodes 'LIVE NOW' [36,282][537,319] (left bound 36 = the 36/37 left inset of sibling rows) and 'SEE ALL' [897,281][1043,320] (right bound 1043 = the 1043/1044 right edge of sibling full-width rows) on a 1080 px screen, so on this LTR Home the label sits at the left inset and the action copy at the row end; the tab round-trip replay (e2-replay.log, e2.replay.json) reports identical bounds, so no layout shift on data re-arrival; screenshot e2.png captured for the visual reviewer (pixel/alignment judgement is theirs); no UX-DEFECT found on the Home screen visited (empty state '
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e1-scene.log
android.widget.TextView الجلسات الجارية الآن tappable [496,282][1044,328]
android.widget.Button عرض الكل tappable [37,281][478,330]
android.widget.TextView عرض الكل tappable [37,281][160,330]
android.widget.TextView لا شيء قيد التشغيل الآن tappable [396,438][684,484]
android.widget.Button مهمة برمجة جديدة tappable [37,612][1043,728]
android.widget.TextView مهمة برمجة جديدة tappable [390,646][624,692]
android.widget.Button مهمة جديدة من صورة tappable [37,746][1043,862]
android.widget.TextView مهمة جديدة من صورة tappable [371,780][643,826]
android.widget.TextView استكشاف tappable [36,897][1044,943]
android.widget.Button مراجع الشيفرة, مراجعات PR تلقائية tappable [37,962][1043,1106]
android.widget.TextView مراجع الشيفرة tappable [129,990][911,1036]
android.widget.TextView مراجعات PR تلقائية tappable [129,1040][911,1077]
android.widget.Button وكيل الأمان, اكتشاف الثغرات ومعالجتها tappable [37,1124][1043,1268]
android.widget.TextView وكيل الأمان tappable [129,1152][911,1198]
android.widget.TextView اكتشاف الثغرات ومعالجتها tappable [129,1202][911,1239]
android.widget.Button مراجعة PR, مراجعة طلبات السحب على الجوال tappable [37,1287][1043,1429]
android.widget.TextView مراجعة PR tappable [129,1315][911,1361]
android.widget.TextView مراجعة طلبات السحب على الجوال tappable [129,1365][911,1402]
android.view.View الرئيسية، تبويب، 1 من 3 tappable [720,2195][1080,2337]
android.widget.TextView الرئيسية tappable [733,2281][1067,2330]
android.view.View الوكلاء، تبويب، 2 من 3 tappable [360,2195][720,2337]
android.widget.TextView الوكلاء tappable [373,2281][707,2330]
android.view.View الملف الشخصي، تبويب، 3 من 3 tappable [0,2195][360,2337]
android.widget.TextView الملف الشخصي tappable [13,2281][347,2330]
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e3-en-scene.log
SCENE e3 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.widget.TextView 0 LIVE tappable [58,149][850,186]
android.view.View Agents tappable [58,190][850,296]
android.widget.Button See all tappable [877,203][1023,242]
android.widget.TextView SEE ALL tappable [877,203][1023,242]
android.widget.ScrollView centered-state tappable [0,306][1080,2400]
android.view.ViewGroup centered-state-content tappable [0,958][1080,1442]
android.widget.TextView Nothing running right now tappable [295,1123][786,1188]
android.widget.TextView Start a coding task from your phone. Your sessions will appear here. tappable [56,1197][1025,1289]
android.widget.Button New session tappable [376,1326][704,1442]
android.widget.TextView New session tappable [475,1360][663,1406]
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]
shot: /home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e3.png
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e3-scene.log
SCENE e3 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.widget.TextView الجلسات النشطة: 0 tappable [209,149][1024,195]
android.view.View الوكلاء tappable [209,199][1024,333]
android.widget.Button عرض الكل tappable [86,217][209,266]
android.widget.TextView عرض الكل tappable [86,217][209,266]
android.widget.ScrollView centered-state tappable [0,343][1080,2400]
android.view.ViewGroup centered-state-content tappable [0,981][1080,1419]
android.widget.TextView لا شيء قيد التشغيل الآن tappable [349,1146][731,1211]
android.widget.TextView ابدأ مهمة برمجة من هاتفك. ستظهر جلساتك هنا. tappable [262,1220][818,1266]
android.widget.Button جلسة جديدة tappable [391,1303][689,1419]
android.widget.TextView جلسة جديدة tappable [430,1337][589,1383]
android.view.View الرئيسية، تبويب، 1 من 3 tappable [720,2195][1080,2337]
android.widget.TextView الرئيسية tappable [733,2281][1067,2330]
android.view.View الوكلاء، تبويب، 2 من 3 tappable [360,2195][720,2337]
android.widget.TextView الوكلاء tappable [373,2281][707,2330]
android.view.View الملف الشخصي، تبويب، 3 من 3 tappable [0,2195][360,2337]
android.widget.TextView الملف الشخصي tappable [13,2281][347,2330]
shot: /home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e3.png
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e2-home.log
android.widget.Button New coding task tappable [37,602][1043,718]
android.widget.TextView New coding task tappable [450,636][696,682]
android.widget.Button New task from a picture tappable [37,736][1043,852]
android.widget.TextView New task from a picture tappable [396,770][749,816]
android.widget.TextView EXPLORE tappable [36,887][1044,924]
android.widget.Button Code Reviewer, Automatic PR reviews tappable [37,943][1043,1087]
android.widget.TextView Code Reviewer tappable [171,971][953,1017]
android.widget.TextView Automatic PR reviews tappable [171,1021][953,1058]
android.widget.Button Security Agent, Find and remediate vulnerabilities tappable [37,1105][1043,1249]
android.widget.TextView Security Agent tappable [171,1133][953,1179]
android.widget.TextView Find and remediate vulnerabilities tappable [171,1183][953,1220]
android.widget.Button PR Review, Review pull requests on mobile tappable [37,1268][1043,1410]
android.widget.TextView PR Review tappable [171,1296][953,1342]
android.widget.TextView Review pull requests on mobile tappable [171,1346][953,1383]
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]
shot: /home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e2.png
appium.sh: 5 scene calls in this round. One scene is one round trip:
  put this scenario's steps in a scenes JSON and run one
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-section-header-is-mirrored-versus-the-same-6caf94-8e8e/e2e-mobile-app/e2-replay.log
android.widget.TextView LIVE NOW tappable [36,282][537,319]
android.widget.Button See all tappable [555,281][1043,320]
android.widget.TextView SEE ALL tappable [897,281][1043,320]
android.widget.TextView Nothing running right now tappable [348,428][732,474]
android.widget.Button New coding task tappable [37,602][1043,718]
android.widget.TextView New coding task tappable [450,636][696,682]
android.widget.Button New task from a picture tappable [37,736][1043,852]
android.widget.TextView New task from a picture tappable [396,770][749,816]
android.widget.TextView EXPLORE tappable [36,887][1044,924]
android.widget.Button Code Reviewer, Automatic PR reviews tappable [37,943][1043,1087]
android.widget.TextView Code Reviewer tappable [171,971][953,1017]
android.widget.TextView Automatic PR reviews tappable [171,1021][953,1058]
android.widget.Button Security Agent, Find and remediate vulnerabilities tappable [37,1105][1043,1249]
android.widget.TextView Security Agent tappable [171,1133][953,1179]
android.widget.TextView Find and remediate vulnerabilities tappable [171,1183][953,1220]
android.widget.Button PR Review, Review pull requests on mobile tappable [37,1268][1043,1410]
android.widget.TextView PR Review tappable [171,1296][953,1342]
android.widget.TextView Review pull requests on mobile tappable [171,1346][953,1383]
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: home: Section header is mirrored versus the same header on agents.png: the title sits left and "عرض الكل" sits right, so section headers do not share one alignment.

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

Flow: home
Found on revision: fd04ca1

Repro:

  1. set this state first: brand-new first-run account (via fresh) with $10 credits, a second organization, 3 Code Reviewer PRs, seeded with app:mobile-sheet-fixtures, device in landscape reverse? Hmm.
  2. open the app on emulator-5602
  3. reach the screen the capture names (home)
  4. the capture shows the defect named below

Observed: Section header is mirrored versus the same header on agents.png: the title sits left and "عرض الكل" sits right, so section headers do not share one alignment.
Expected: the screen renders without this defect

Evidence (from the device run):

Open findings (not fixed here)

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

e3-ar

Explorer finding: home: Section header is mirrored versus the same header on agents.png: the title sits left and "عرض الكل" sits right, so section headers do not share one alignment.

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

Flow: home
Found on revision: fd04ca1

Repro:
1. set this state first: brand-new first-run account (via `fresh`) with $10 credits, a second organization, 3 Code Reviewer PRs, seeded with `app:mobile-sheet-fixtures`, device in landscape reverse? Hmm.
2. open the app on emulator-5602
3. reach the screen the capture names (home)
4. the capture shows the defect named below

Observed: Section header is mirrored versus the same header on agents.png: the title sits left and "عرض الكل" sits right, so section headers do not share one alignment.
Expected: the screen renders without this defect

Evidence (from the device run):
- ~/.local/share/kwf/findings/explorer-home-section-header-is-mirrored-versus-the-same-6caf948e/home.png
@kilo-code-bot

kilo-code-bot Bot commented Sep 19, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

The Home section-header action is now placed with direction-relative flex-row/justify-end instead of a physical textAlign, which correctly mirrors under RTL and matches the Agents section-header pattern; the updated layout tests cover both directions and no memory-leak or correctness concerns were found.

Files Reviewed (2 files)
  • apps/mobile/src/components/home/section-header.tsx
  • apps/mobile/src/components/home/section-header.mounted.test.tsx

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

Review guidance: REVIEW.md from base branch main

@iscekic

iscekic commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator Author

This description names a scenario the proof did not capture:

  • not proved live: home.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 iscekic added the human-ready The PR is ready for human review. label Sep 19, 2026
@iscekic iscekic self-assigned this Sep 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

human-ready The PR is ready for human review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant