Keep the hero copy on the left under RTL

[devYRPauli]

Fixes #3511.

Arabic and Persian hero copy stays physically left of the fixed artwork while text alignment follows its reading direction. Mobile keeps the existing stacked layout. The tablet popover also inherits the shared reveal scale: its previous tablet-only starting transform grew across the text before the more-specific animated rule settled it back down.

Real Chrome verification used the existing profile through the approved browser integration and a local server for the current checkout. The original desktop overlap was reproduced, and the site’s own language picker was exercised. Fifteen normal-layout cases cover Arabic/Persian at the 769/1023 tablet edges, 900px tablet, 1671/1280 desktop, and 768/375 mobile widths, with English controls. All final cases have zero text/illustration overlap and horizontal overflow; English placement is unchanged.

A frame-by-frame replay of the actual 769px reveal found six visible glyph-overlap frames with the original proposal; the additional transform cleanup reduced that to zero across 55 frames. Static fixed-transform measurements were supporting diagnostics, not substitutes for normal rendering.

node --check docs/site.js, node Scripts/check-site-locales.mjs (23 locales / 138 messages), make check, and independent P0–P2 review passed. The full repository suite passed all 1,058 selections in 89 groups on the first pass, with no retries or timeouts (951.1 seconds). Final-head CI passed: https://github.com/steipete/CodexBar/actions/runs/34454905234. After integrating main, the Swift source and tests are identical to the fully tested credential-guidance merge.

Includes a 0.58.1 Unreleased entry. Thanks @devYRPauli!

Before, normal Arabic rendering overlaps the panel:

After, selected through the actual language picker with normal animation:

[clawsweeper]

🦞👀
ClawSweeper picked this up.

Pull request received. I will update this pull request when review starts.

ClawSweeper review complete

ClawSweeper finished reviewing this revision. The review result is being finalized.

View the workflow run.

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-08T16:54:35.952522Z	111a174	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed September 10, 2026, 4:27 AM ET / 08:27 UTC (Revision 5).

ClawSweeper review

What this changes

Keeps Arabic and Persian landing-page text physically left of the artwork, preserves natural text alignment, removes a conflicting tablet reveal transform, and adds a changelog entry.

Merge readiness

✅ Ready for maintainer review

The PR remains useful: current main and v0.58.0 retain the affected layout rules. The focused patch and inspected before/after screenshots support landing it, with no actionable correctness findings.

Priority: P2
Reviewed head: 9d2ded8c9bbce768ed9188f52d6cbeafb51d2bd4

Review scores

Measure	Result	What it means
Overall readiness	🐚 platinum hermit (4/6)	A narrow, maintainable repair with convincing visual proof and no actionable findings; reported checks were not rerun during this read-only review.
Proof confidence	🦞 diamond lobster (5/6) ✨ media proof bonus	Sufficient (screenshot): Inspected screenshots directly demonstrate the repaired Arabic hero placement in Chrome through the real language picker; the captured body supplements them with responsive checks and measured tablet reveal results.
Patch quality	🐚 platinum hermit (4/6)	No actionable review findings were identified.

Verification

Check	Result	Evidence
Real behavior	Verified	Sufficient (screenshot): Inspected screenshots directly demonstrate the repaired Arabic hero placement in Chrome through the real language picker; the captured body supplements them with responsive checks and measured tablet reveal results.
Evidence reviewed	7 items	Verified introduced scope: The pinned main-to-head diff contains only the CSS repair and one changelog entry. Local inspection matches the supplied complete introduction evidence. Layout and animation contract: The language picker sets root.dir from the locale catalog. Physical margin-right preserves left placement while text-align:start follows reading direction; mobile resets inline margins. The shared initial and animated popover rules already use the same scale variable, so removing the tablet override eliminates the competing starting scale. Inspected real visual proof: Opened all four prepared images from the media manifest. Both before/after pairs visibly show Arabic copy moving clear of the right-hand panel. The captured PR body additionally reports real Chrome language-picker checks across 15 responsive cases and zero overlap across 55 tablet reveal frames; these measurements are contributor-reported, not independently rerun.
Findings	None	None.
Security	None	None.

How this fits together

The website language picker sets the page’s reading direction. Hero layout styles position translated copy beside fixed artwork and control the illustrated usage panel’s entrance animation.

flowchart LR
  A[Language picker] --> B[Page reading direction]
  B --> C[Hero text alignment]
  D[Viewport width] --> E[Responsive layout]
  C --> E
  E --> F[Copy beside fixed artwork]
  G[Shared reveal transform] --> F

Loading

Before merge

None.

Agent review details

Security

None.

Review metrics

None.

Root-cause cluster

Relationship: fixed_by_candidate
Canonical: #3511
Summary: This PR is the explicit candidate fix for the open Arabic landing-page collision report.

Members:

• canonical: Arabic landing page is broken #3511 - The report shows the same hero-copy collision addressed by the patch.
• adjacent_distinct: make check and make test fail on macOS when python3 has no os.waitid #3515 - The closed Python test-runner report concerns validation infrastructure, not website layout.

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

Technical review

Best possible solution:

Retain the focused CSS repair so translated text stays readable beside the artwork throughout the tablet reveal.

Do we have a high-confidence way to reproduce the issue?

Yes: selecting Arabic or Persian activates RTL flow against right-anchored artwork, and the unchanged main stylesheet explains the collision shown in the before screenshots. This review inspected source and supplied proof without executing the website.

Is this the best way to solve the issue?

Yes: the patch uses existing layout and animation rules without duplicating localization logic or changing stored preferences.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning medium; reviewed against f5c94a11834b.

Labels

Label justifications:

• P2: Repairs a visible readability defect affecting the existing Arabic and Persian website layouts.
• rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Inspected screenshots directly demonstrate the repaired Arabic hero placement in Chrome through the real language picker; the captured body supplements them with responsive checks and measured tablet reveal results.
• proof: sufficient: Contributor real behavior proof is sufficient. Inspected screenshots directly demonstrate the repaired Arabic hero placement in Chrome through the real language picker; the captured body supplements them with responsive checks and measured tablet reveal results.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Inspected screenshots directly demonstrate the repaired Arabic hero placement in Chrome through the real language picker; the captured body supplements them with responsive checks and measured tablet reveal results.

Evidence

What I checked:

• Verified introduced scope: The pinned main-to-head diff contains only the CSS repair and one changelog entry. Local inspection matches the supplied complete introduction evidence. (docs/site.css:625, 9d2ded8c9bbc)
• Layout and animation contract: The language picker sets root.dir from the locale catalog. Physical margin-right preserves left placement while text-align:start follows reading direction; mobile resets inline margins. The shared initial and animated popover rules already use the same scale variable, so removing the tablet override eliminates the competing starting scale. (docs/site.css:364, 9d2ded8c9bbc)
• Inspected real visual proof: Opened all four prepared images from the media manifest. Both before/after pairs visibly show Arabic copy moving clear of the right-hand panel. The captured PR body additionally reports real Chrome language-picker checks across 15 responsive cases and zero overlap across 55 tablet reveal frames; these measurements are contributor-reported, not independently rerun.
• Still needed on main and latest release: The v0.58.0 stylesheet retains text-align:left without the physical auto margin, and pinned main retains the tablet-only transform. No supplied merged PR fixes the reported overlap. (docs/site.css:618, 88fa2f45fa1e)
• Review continuity: The CSS is unchanged from the previously reviewed head. The previous completed review lists no findings or published rank-up moves; no historical blocker was inferred from its generic status. (docs/site.css, 9d2ded8c9bbc)
• Related issue and merged feature history: Arabic landing page is broken #3511 reports the same visible collision and remains open. Localize website across 21 languages #1550 established website localization, while Redesign codexbar.app landing page #1784 supplied the landing redesign; neither supersedes this repair.

Likely related people:

• steipete: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)
• vyctorbrzezowski: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)

Rating scale

Score	Internal tier	Crab rank	Meaning
6/6	S	🦀 challenger crab	Exceptional readiness
5/6	A	🦞 diamond lobster	Very strong readiness
4/6	B	🐚 platinum hermit	Good normal PR; ordinary maintainer review
3/6	C	🦐 gold shrimp	Useful, but confidence is limited
2/6	D	🦪 silver shellfish	Proof or implementation needs work
1/6	F	🧂 unranked krab	Not merge-ready
N/A	NA	🌊 off-meta tidepool	Rating does not apply

Overall follows the weaker of proof and patch quality.
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

Workflow

• ClawSweeper keeps one durable marker-backed review comment per issue or PR.
• Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
• A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
• PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
• Maintainers can also comment @clawsweeper review to request a fresh review only.
• Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
• Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
• Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

History

Review history (4 earlier review cycles)

• reviewed 2026-09-08T16:53:15.730Z sha 111a174 :: needs maintainer review before merge. :: none
• reviewed 2026-09-08T19:13:49.895Z sha 111a174 :: needs maintainer review before merge. :: none
• reviewed 2026-09-10T08:10:58.275Z sha 111a174 :: blocked before merge. :: none
• reviewed 2026-09-10T08:15:36.025Z sha 6de975a :: needs maintainer review before merge. :: none

[devYRPauli]

Screenshots for the description.

Before, the Arabic headline prints over the usage panel:

After, the headline sits on the physical left and the panel is clear:

Both shots are 1280x720 at 2x scale. I switched the site to Arabic with its own language button, so the strings are real Arabic and not a forced dir attribute.

[steipete]

Landed in 4865f98; #3511 is closed. The fix preserves the physical space beside the artwork while following Arabic/Persian reading direction, and removes the conflicting tablet reveal transform.

The full local suite passed 1,058 selections in 89 groups on the first pass, with no retries or timeouts. Site syntax/localization checks, lint, independent P0–P2 review and final-head CI passed. Before/after screenshots and the 15-case local browser verification are in the PR body.

Post-merge live verification passed on codexbar.app: Arabic and Persian desktop layouts and the 769px Arabic tablet layout have no text/panel overlap or horizontal overflow. GitHub Pages reports the merge deployed, and the stylesheet fetched through the live browser matches the reviewed file byte-for-byte (SHA-256 f88a3a0f772514d2995c9f339985a1cd5786e17281714feb8037c893e6fbddb1).

Thanks @devYRPauli! Contributor credit and the Unreleased changelog entry are preserved.