In apps that set direction: rtl on <html> or <body> (Arabic, Hebrew, and other RTL-aware layouts), the TWD sidebar inherits it and flips — buttons, icons, stats row and the close/open affordance all end up mirrored. Since the sidebar is an overlay tool (not part of the app's localized UI), it should always render left-to-right regardless of the host document direction.
One line fixes it for every RTL-aware app that consumes the library.
Scope
- In
src/ui/utils/styles.ts, add direction: ltr; to the existing .twd-sidebar rule (around line 77, inside the CSS_STYLES template — this is the twd-styles block injected at runtime).
- Update the existing styles unit test in
src/tests/ui/utils/styles.spec.ts to assert the rule is present (the file already checks for .twd-sidebar — extend it to also check the new declaration).
- Add a short note in
docs/ about the sidebar always rendering LTR (one sentence is enough — find the closest existing page about the sidebar UI).
Reference
.twd-sidebar rule: src/ui/utils/styles.ts:77- Style injection id:
src/ui/utils/styles.ts:236 (twd-styles)
- Existing style test:
src/tests/ui/utils/styles.spec.ts
How to reproduce
In examples/twd-test-app/index.html, temporarily add dir=\"rtl\" to the <html> tag and run npm run dev. The sidebar renders mirrored. After the fix, it should stay LTR while the rest of the page flips.
Acceptance criteria
How to contribute
Read CONTRIBUTING.md first. Quick steps for this issue:
- Fork, clone, create a feature branch:
git checkout -b fix/sidebar-force-ltr.
- From the repo root, build the library and sync it to the example apps:
npm install
npm run build
npm run copy:mock-sw
- Install and run the test app:
cd examples/twd-test-app
npm install
npm run dev
- Temporarily set
<html dir=\"rtl\"> in examples/twd-test-app/index.html to reproduce the issue, then verify the fix.
- Run the library's unit tests from the repo root:
npm run test:ci.
- Open the PR with before / after screenshots.
Tiny surface area, high impact for i18n users — perfect first contribution.
In apps that set
direction: rtlon<html>or<body>(Arabic, Hebrew, and other RTL-aware layouts), the TWD sidebar inherits it and flips — buttons, icons, stats row and the close/open affordance all end up mirrored. Since the sidebar is an overlay tool (not part of the app's localized UI), it should always render left-to-right regardless of the host document direction.One line fixes it for every RTL-aware app that consumes the library.
Scope
src/ui/utils/styles.ts, adddirection: ltr;to the existing.twd-sidebarrule (around line 77, inside theCSS_STYLEStemplate — this is thetwd-stylesblock injected at runtime).src/tests/ui/utils/styles.spec.tsto assert the rule is present (the file already checks for.twd-sidebar— extend it to also check the new declaration).docs/about the sidebar always rendering LTR (one sentence is enough — find the closest existing page about the sidebar UI).Reference
.twd-sidebarrule:src/ui/utils/styles.ts:77src/ui/utils/styles.ts:236(twd-styles)src/tests/ui/utils/styles.spec.tsHow to reproduce
In
examples/twd-test-app/index.html, temporarily adddir=\"rtl\"to the<html>tag and runnpm run dev. The sidebar renders mirrored. After the fix, it should stay LTR while the rest of the page flips.Acceptance criteria
.twd-sidebarrule insrc/ui/utils/styles.tsincludesdirection: ltr;.npm run test:ciis green.<html dir=\"rtl\">is set.How to contribute
Read CONTRIBUTING.md first. Quick steps for this issue:
git checkout -b fix/sidebar-force-ltr.cd examples/twd-test-app npm install npm run dev<html dir=\"rtl\">inexamples/twd-test-app/index.htmlto reproduce the issue, then verify the fix.npm run test:ci.