Skip to content

feat(app): RTL layout interactions - #40410

Merged
Hona merged 1 commit into
anomalyco:devfrom
Hona:rtl-layout-fixes
Aug 4, 2026
Merged

feat(app): RTL layout interactions#40410
Hona merged 1 commit into
anomalyco:devfrom
Hona:rtl-layout-fixes

Conversation

@Hona

@HonaHona commented Aug 4, 2026

Copy link
Copy Markdown
Member

Summary

  • mirror titlebar controls, diff navigation, file trees, tabs, menus, switches, inputs, and scrollbars with logical RTL geometry
  • correct RTL resize hit zones and drag direction for review/file panels
  • preserve bidi-safe filename text while mirroring tree hierarchy and indentation
  • keep titlebar portal mounts synchronized across debug direction changes

Verification

  • live Electron CDP checks for tab-mask overlap, resize boundaries, divider placement, titlebar close placement, diff icon transforms, and file-tree alignment
  • bun typecheck (packages/app)
  • bun typecheck (packages/ui)
  • bun typecheck (packages/session-ui)
  • bun test (packages/ui): 27 passed
  • repository pre-push typecheck: 30 packages passed
  • Prettier and git diff checks

CopilotAI lite review requested due to automatic review settings August 4, 2026 11:05
@Hona
Hona requested a review from Brendonovich as a code ownerAugust 4, 2026 11:05
@Hona
Hona enabled auto-merge (squash) August 4, 2026 11:07

CopilotAI 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.

Pull request overview

This PR fixes RTL (right-to-left) interaction and layout issues across the app and shared UI packages by replacing left/right physical geometry with logical inline properties, adding RTL-aware transforms, and adjusting keyboard/navigation behavior to match RTL expectations.

Changes:

  • Replace physical CSS properties (left/right/padding-left, etc.) with logical equivalents (inline-start/inline-end, padding-inline, text-align: start) across key UI components.
  • Add RTL-specific transforms/overrides for directional UI elements (switch thumbs, chevrons, tab fades) and correct drag/resize behavior in RTL.
  • Improve bidi safety for filenames in mirrored hierarchies (notably in the v2 file tree) and keep titlebar portal mounting stable across direction changes.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated no comments.

Show a summary per file
FileDescription
packages/ui/src/v2/components/text-input-v2.cssUses logical padding/margins for RTL-correct text input geometry.
packages/ui/src/v2/components/switch-v2.cssAdds RTL thumb translation overrides for checked/hover states.
packages/ui/src/v2/components/select-v2.cssConverts paddings/text alignment to logical properties; ensures selected indicator visibility.
packages/ui/src/v2/components/file-tree-v2.cssSwitches to logical alignment and adds RTL chevron rotation behavior.
packages/ui/src/components/text-field.cssReplaces right padding with logical inline-end padding for RTL.
packages/ui/src/components/tabs.tsxSets a default dir on tab triggers to improve bidi behavior.
packages/ui/src/components/tabs.cssMigrates multiple rules to logical properties and adds RTL gradient variants.
packages/ui/src/components/switch.cssAdds RTL thumb translation override for checked state.
packages/ui/src/components/select.cssConverts trigger paddings/margins to logical properties for RTL.
packages/ui/src/components/scroll-view.cssUses logical positioning for scrollbar thumb alignment.
packages/ui/src/components/resize-handle.tsxAdjusts horizontal drag delta math to respect RTL directionality.
packages/ui/src/components/resize-handle.cssUses logical positioning and adds RTL-specific transforms for handle placement/hit zones.
packages/ui/src/components/icon.tsxExpands “directional icon” detection to include arrow icons for RTL mirroring behavior.
packages/ui/src/components/dropdown-menu.cssConverts padding/right positioning to logical inline-end properties.
packages/session-ui/src/v2/components/session-review-v2.tsxMakes diff navigation arrow-key behavior RTL-aware and updates displayed key hints.
packages/session-ui/src/v2/components/session-review-v2.cssConverts sidebar/tooling layout to logical properties and adds RTL fade variants.
packages/app/src/components/titlebar.tsxKeeps titlebar portal mount synced across direction changes; adjusts Windows titlebar alignment behavior.
packages/app/src/components/titlebar-tab-nav.cssConverts close button/divider geometry to logical properties; adds RTL overflow mask variant.
packages/app/src/components/settings-v2/settings-v2.cssSwitches various paddings/text alignment/positioning to logical properties for RTL.
packages/app/src/components/file-tree.tsxUses logical indentation and text alignment for RTL mirroring.
packages/app/src/components/file-tree-v2.tsxUses logical indentation/guide positioning, removes forced LTR, and wraps filenames in <bdi dir="auto"> for bidi safety.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@HonaHona changed the title fix(app): correct RTL layout interactionsfeat(app): RTL layout interactionsAug 4, 2026
@Hona
Hona merged commit de1bd36 into anomalyco:devAug 4, 2026
16 of 17 checks passed
banlanzs pushed a commit to banlanzs/opencode that referenced this pull request Aug 6, 2026
charlesverge pushed a commit to charlesverge/opencode that referenced this pull request Aug 11, 2026
moonug pushed a commit to moonug/opencode that referenced this pull request Aug 19, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@Hona