Skip to content

fix(mobile): align home section header action to the row outer edge in RTL - #6461

Merged
iscekic merged 2 commits into
mainfrom
kwf/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5
Sep 21, 2026
Merged

iscekic merged 2 commits into
mainfrom
kwf/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5

Conversation

@iscekic

@iscekic iscekic commented Sep 21, 2026

Copy link
Copy Markdown
Contributor

Changelog for users

  • On the Arabic (RTL) home screen, the section action link عرض الكل now sits flush with the left content margin.
  • The section label الجلسات الجارية الآن stays flush with the right content margin, so the header row spans both margins.
  • The English (LTR) home keeps its existing layout: label at the left margin, See all at the right margin.
  • Tapping the action still navigates to the Agents index.

Changelog for maintainers

  • The action link no longer branches on I18nManager.isRTL; a flex-row justify-end box aligns it to the row's outer edge in both directions.
  • The action text carries no physical text-left/text-right class, so direction comes from flex layout alone.
  • The label keeps grow and max-w-full; the row keeps flex-row flex-wrap justify-between, so the two children still split the row.
  • The mounted section-header layout test asserts the action box classes and rejects physical text-alignment classes on the action text.
  • A second test asserts the action layout is identical in LTR and RTL.
  • Review the outer-edge alignment against the session card and explore rows, which share the same content margins.
  • No API, data, config, or migration change.

E2E proof

[e1] home-arabic-rtl, section header row mirrored (the fix's proof) plus the action's CTA: expected — on the Arabic home the eyebrow 'الجلسات الجارية الآن' is flush with the RIGHT margin and 'عرض الكل' is… — android emulator-5554; parked steps were unrunnable (tap 'Language' matched the 'Translate tool summaries' subtitle — Language lives under Profile → Preferences → Account), corrected in e2e-scripts.json and reset via pm clear + login.sh; the single scene call then reported 'SCENE e1 OK' (e1-scene.log:41) and its final Arabic-home digest shows the eyebrow 'الجلسات الجارية الآن' at [496,217][1044,263] flush with the content right edge 1044 and 'عرض الكل' at [37,216][478,265] flush with the page inset 37, tab bar mirrored (الرئيسية [720,2195][1080,2337], الملف الشخصي [0,2195][360,2337]) and the…

[e1] home-arabic-rtl, section header row mirrored (the fix's proof) plus the action's CTA: expected — on the Arabic home the eyebrow 'الجلسات الجارية الآن' is flush with the RIGHT margin and 'عرض الكل' is… — e2e-mobile-app/e1.png

[e4] ux-check: 'عرض الكل' navigates to the Agents index and shows press feedback — android emulator-5554; tapping 'عرض الكل' on the Arabic home landed on the All Sessions/Agents index — fresh hierarchy dump e4-agents-index.xml shows tab الوكلاء selected="true" [360,2195][720,2337], header 'الجلسات النشطة: 0' [209,84][1024,130], empty state 'لا شيء قيد التشغيل الآن' [349,1146][731,1211] and the retry-free next action 'جلسة جديدة' [430,1337][589,1383]; press feedback is retained by the diff (active:opacity-70 on the Pressable, change.diff:119), but no live pressed frame could be frozen (record.sh shot returned a cached frame byte-identical to e1.png; papercut…

[e4] ux-check: 'عرض الكل' navigates to the Agents index and shows press feedback — e2e-mobile-app/e4-agents-index.png

[e2] ux-check: Arabic (RTL) home screen — header row mirrored to both margins — android emulator-5604; e2-digest.log shows the action text line 'android.widget.TextView عرض الكل tappable [37,281][160,330]' (left edge 37 = session card left edge 37 = explore rows 36/37) and the label line 'android.widget.TextView الجلسات الجارية الآن tappable [496,282][1044,328]' (right edge 1044 = explore row right edge 1044), so the header row is mirrored to both content margins; e2.png is the still.

[e2] ux-check: Arabic (RTL) home screen — header row mirrored to both margins — e2e-mobile-app/e2.png

[e5] ux-check: largest supported font scale — header action and label not clipped or pushed off-screen — android emulator-5604; with the Android font-size slider at its maximum, e5-digest.log shows 'android.widget.TextView عرض الكل tappable [37,281][257,370]' and 'android.widget.TextView الجلسات الجارية الآن tappable [456,285][1044,366]' — both fully inside the 1080px screen, single-line, non-overlapping, label flush at the right margin; e5.png is the still. Font scale was restored to the harness canonical 1.0 afterwards.

[e5] ux-check: largest supported font scale — header action and label not clipped or pushed off-screen — e2e-mobile-app/e5.png

[e3] ux-check: LTR home screen: 'See all' sits at the right content margin and its section label at the left content margin. — android emulator-5606, LTR English home screen, SCENE e3 OK: on the same row the section label 'LIVE NOW' starts at x=36 (e3-scene.log line 5) and the 'See all' action ends at x=1043 (line 6, SEE ALL text line 7), matching the screen's content margins x=36/x=1043-1044 (EXPLORE line 13, 'New coding task' button [37,602][1043,718] line 9); the label is left and the action right, no layout shift or duplicate loading indicator seen in the digest; screenshot e3.png captured for the visual reviewer (appearance is theirs, not claimed here); no UX-DEFECT observed in behavior.

[e3] ux-check: LTR home screen: 'See all' sits at the right content margin and its section label at the left content margin. — e2e-mobile-app/e3.png

E2E proof — log excerpts

[e1] home-arabic-rtl, section header row mirrored + action CTA -> pass :: android emulator-5554; parked steps were unrunnable (tap 'Language' matched the 'Translate tool summaries' subtitle — Language lives under Profile → Preferences → Account), corrected in e2e-scripts.json and reset via pm clear + login.sh; the single scene call then reported 'SCENE e1 OK' (e1-scene.log:41) and its final Arabic-home digest shows the eyebrow 'الجلسات الجارية الآن' at [496,217][1044,263] flush with the content right edge 1044 and 'عرض الكل' at [37,216][478,265] flush with the page inset 37, tab bar mirrored (الرئيسية [720,2195][1080,2337], الملف الشخصي [0,2195][360,2337]) and the 'استكشاف' row [36,832][1044,878] unchanged, and the same OK proves the CTA (tap عرض الكل → 'جلسة جديد
[e4] ux-check: 'عرض الكل' navigates to the Agents index and shows press feedback -> pass :: android emulator-5554; tapping 'عرض الكل' on the Arabic home landed on the All Sessions/Agents index — fresh hierarchy dump e4-agents-index.xml shows tab الوكلاء selected="true" [360,2195][720,2337], header 'الجلسات النشطة: 0' [209,84][1024,130], empty state 'لا شيء قيد التشغيل الآن' [349,1146][731,1211] and the retry-free next action 'جلسة جديدة' [430,1337][589,1383]; press feedback is retained by the diff (active:opacity-70 on the Pressable, change.diff:119), but no live pressed frame could be frozen (record.sh shot returned a cached frame byte-identical to e1.png; papercut obstacle:record-shot-stale) so the pressed pixels remain the visual reviewer's call on e4-agents-index.png / e4-home.
[e2] ux-check: Arabic (RTL) home screen — header row mirrored to both margins -> pass :: android emulator-5604; e2-digest.log shows the action text line 'android.widget.TextView عرض الكل tappable [37,281][160,330]' (left edge 37 = session card left edge 37 = explore rows 36/37) and the label line 'android.widget.TextView الجلسات الجارية الآن tappable [496,282][1044,328]' (right edge 1044 = explore row right edge 1044), so the header row is mirrored to both content margins; e2.png is the still.
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5/e2e-mobile-app/e1-scene.log
android.widget.TextView الجلسات الجارية الآن tappable [496,217][1044,263]
android.widget.Button عرض الكل tappable [37,216][478,265]
android.widget.TextView عرض الكل tappable [37,216][160,265]
android.widget.TextView لا شيء قيد التشغيل الآن tappable [396,373][684,419]
android.widget.Button مهمة برمجة جديدة tappable [37,547][1043,663]
android.widget.TextView مهمة برمجة جديدة tappable [390,581][624,627]
android.widget.Button مهمة جديدة من صورة tappable [37,681][1043,797]
android.widget.TextView مهمة جديدة من صورة tappable [371,715][643,761]
android.widget.TextView استكشاف tappable [36,832][1044,878]
android.widget.Button مراجع الشيفرة, مراجعات PR تلقائية tappable [37,897][1043,1041]
android.widget.TextView مراجع الشيفرة tappable [129,925][911,971]
android.widget.TextView مراجعات PR تلقائية tappable [129,975][911,1012]
android.widget.Button وكيل الأمان, اكتشاف الثغرات ومعالجتها tappable [37,1059][1043,1203]
android.widget.TextView وكيل الأمان tappable [129,1087][911,1133]
android.widget.TextView اكتشاف الثغرات ومعالجتها tappable [129,1137][911,1174]
android.widget.Button مراجعة PR, مراجعة طلبات السحب على الجوال tappable [37,1222][1043,1364]
android.widget.TextView مراجعة PR tappable [129,1250][911,1296]
android.widget.TextView مراجعة طلبات السحب على الجوال tappable [129,1300][911,1337]
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-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5/e2e-mobile-app/e4-navigate.log
# e4 — android emulator-5554, 2026-09-21: Arabic home, tap 'عرض الكل' -> Agents index
# source: appium.sh emulator-5554 hierarchy /home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5/e2e-mobile-app/e4-agents-index.xml (fr
<redacted>
<redacted>
<redacted>
<redacted>
<redacted>
<redacted>
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5/e2e-mobile-app/e4-home.txt
sim_browser_snapshot — e4, android emulator-5554, Arabic home before the tap (2026-09-21T04:44Z)
- android.view.View "Kilo"
- TextView "الجلسات الجارية الآن"
- Button "عرض الكل"
- TextView "عرض الكل"
- TextView "لا شيء قيد التشغيل الآن"
- Button "مهمة برمجة جديدة"
- Button "مهمة جديدة من صورة"
- TextView "استكشاف"
- Button "مراجع الشيفرة, مراجعات PR تلقائية"
- Button "وكيل الأمان, اكتشاف الثغرات ومعالجتها"
- Button "مراجعة PR, مراجعة طلبات السحب على الجوال"
- android.view.View "الرئيسية، تبويب، 1 من 3" [checked]
- android.view.View "الوكلاء، تبويب، 2 من 3"
- android.view.View "الملف الشخصي، تبويب، 3 من 3"
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5/e2e-mobile-app/e2-digest.log
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]
shot: /home/igor_kilocode_ai/.local/share/kwf/sections/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5/e2e-mobile-app/e2.png
Owner request

Explorer finding: home-arabic-rtl: The 'الجلسات الجارية الآن' / 'عرض الكل' header row is clustered near the centre instead of being mirrored to the left/right margins, while the tab bar, session card and explore rows on the same screen are fully mirrored.

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-arabic-rtl
Found on revision: f2181ae

Repro:

  1. set this state first: density 240; reviews 3; credits 18; uimode night; battery 33 discharging; org; relaunch; the device in dark mode
  2. open the app on emulator-5554
  3. reach home-arabic-rtl
  4. the capture shows the defect named below

Observed: The 'الجلسات الجارية الآن' / 'عرض الكل' header row is clustered near the centre instead of being mirrored to the left/right margins, while the tab bar, session card and explore rows on the same screen are fully mirrored.
Expected: the screen renders without this defect

Evidence (from the device run):

Follow-ups (not changed here)

  • not proved live: ux-check: Arabic (RTL) home screen: the 'عرض الكل' link's outer edge sits at the screen's left content margin, horizontally aligned with the left edge of the session card and the explore rows below, while 'الجلسات الجارية الآن' sits at the right content margin — the header row is mirrored to both margins. (no capture cited it)
  • not proved live: ux-check: At the largest supported font scale the header action and label are not clipped, wrapped outside the row, or pushed off-screen. (no capture cited it)
  • not proved live: ux-check: Tapping 'عرض الكل' still navigates to the All Sessions/Agents index and the link shows its press feedback. (no capture cited it)

Open findings (not fixed here)

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

…n RTL

Explorer finding: home-arabic-rtl: The 'الجلسات الجارية الآن' / 'عرض الكل' header row is clustered near the centre instead of being mirrored to the left/right margins, while the tab bar, session card and explore rows on the same screen are fully mirrored.

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-arabic-rtl
Found on revision: f2181ae

Repro:
1. set this state first: density 240; reviews 3; credits 18; uimode night; battery 33 discharging; org; relaunch; the device in dark mode
2. open the app on emulator-5554
3. reach home-arabic-rtl
4. the capture shows the defect named below

Observed: The 'الجلسات الجارية الآن' / 'عرض الكل' header row is clustered near the centre instead of being mirrored to the left/right margins, while the tab bar, session card and explore rows on the same screen are fully mirrored.
Expected: the screen renders without this defect

Evidence (from the device run):
- ~/.local/share/kwf/findings/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb30ba/home-arabic-rtl.png
@kilo-code-bot

kilo-code-bot Bot commented Sep 21, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

The RTL section-header fix is a small, direction-agnostic layout change (flex-row justify-end on the action container, physical text-left/text-right removed) with matching mounted-test coverage; no bugs, security issues, or memory leaks found in the changed lines.

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

Notes (non-blocking, no comment posted)

  • The removed text-left/text-right previously set explicit text alignment inside the action text block; alignment now comes from justify-end in a direction-aware flex row. For single-line labels (the only case for the current home.seeAll copy in ar/he/fa, verified in the device digests) the rendered result is identical. Only a hypothetical multi-line action label would differ in intra-block line alignment, which is not reachable with the current strings.
  • The direction-independence test (does not branch the action layout on direction) remains meaningful: it mutates the same mocked I18nManager object the component would consult, so it would fail if I18nManager branching were reintroduced in section-header.tsx.
  • No useEffect, subscription, timer, or listener is added, so no memory-leak risk is introduced.

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

Review guidance: REVIEW.md from base branch main

@iscekic

iscekic commented Sep 21, 2026

Copy link
Copy Markdown
Contributor Author

This description names a scenario the proof did not capture:

  • not proved live: ux-check: Arabic (RTL) home screen: the 'عرض الكل' link's outer edge sits at the screen's left content margin, horizontally aligned with the left edge of the session card and the explore rows below, while 'الجلسات الجارية الآن' sits at the right content margin — the header row is mirrored to both margins. (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.

@iscekic iscekic added the human-ready The PR is ready for human review. label Sep 21, 2026
@iscekic iscekic self-assigned this Sep 21, 2026

@eshurakov eshurakov left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved after a shallow triage pass. No blocking findings.

@iscekic
iscekic merged commit ba5055a into main Sep 21, 2026
28 checks passed
@iscekic
iscekic deleted the kwf/explorer-home-arabic-rtl-the-header-row-is-clustered-near-7dbb3-e1a5 branch September 21, 2026 19:23
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.

2 participants