Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
ApprovabilityVerdict: Needs human review 1 blocking correctness issue found. You can customize Macroscope's approvability policy. Learn more. |
Dismissing prior approval to re-evaluate e2f066b
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit e2f066b3386a1dd1b0b8fd2d916eafa75f5634a4. Configure here.
Chat messages with RTL languages (Arabic, Hebrew, Persian) rendered incorrectly because the browser defaulted to LTR with no direction hints, causing text and punctuation to appear in the wrong order. Apply dir="auto" and unicode-bidi: plaintext so each line and block element detects its base direction from its first strong character. Code blocks and tables are isolated as LTR to preserve their layout.
Replace padding-left and border-left with padding-inline-start and border-inline-start on lists and blockquotes so they flip correctly in RTL. Use text-align: start instead of left on table cells. Replace data-testid selector with a dedicated class for the composer bidi rule.
Card inherits direction from header language via dir="auto", question text and option labels/descriptions each resolve their own direction independently. Uses logical CSS properties (text-start, gap-x-2) instead of physical ones for correct RTL layout.
Add dir="auto" to thread title rendering in header, sidebar, and settings archive. Add bidi support to plan sidebar (explanation, steps, plan title) and proposed plan card/banner. Use text-start logical property in plan sidebar expand button.
…lements only Remove dir="auto" from the outer question panel wrapper to avoid reversing flex layouts for shortcut keys and status indicators. The inner text elements (question, labels, descriptions) already have their own dir="auto" which handles text direction correctly. Also includes formatting fixes from bun fmt.
d1fd51c to
3cc50de
Compare
Dismissing prior approval to re-evaluate 3cc50de
There was a problem hiding this comment.
🟡 Medium
Lines 449 to 456 in 3cc50de
The task list checkbox uses physical margin: 0 0.35em 0.15em -1.25rem, which pulls the checkbox left with negative margin. In RTL contexts (now enabled by unicode-bidi: plaintext on li elements), the checkbox misaligns because -1.25rem remains left-bound instead of following the inline-start direction. Use margin-inline-start: -1.25rem with separate inline-end and block margins so the negative margin adapts to text direction.
| .chat-markdown li.task-list-item input[type="checkbox"] { | |
| - margin: 0 0.35em 0.15em -1.25rem; | |
| + margin-block: 0 0.15em; | |
| + margin-inline: -1.25rem 0.35em; | |
| vertical-align: middle; | |
| } |
🤖 Copy this AI Prompt to have your agent fix this:
In file @apps/web/src/index.css around lines 449-456:
The task list checkbox uses physical `margin: 0 0.35em 0.15em -1.25rem`, which pulls the checkbox left with negative margin. In RTL contexts (now enabled by `unicode-bidi: plaintext` on `li` elements), the checkbox misaligns because `-1.25rem` remains left-bound instead of following the inline-start direction. Use `margin-inline-start: -1.25rem` with separate inline-end and block margins so the negative margin adapts to text direction.
|
Closing as part of backlog cleanup: this PR is stale, currently conflicting with main, has no approval, and has not had active remediation for 30+ days. If the change is still relevant, please rebase onto current main and request reopening or submit a focused current diff. Thank you for the contribution. |
What Changed
composer, question panels, thread titles, plan sidebar, and
plan cards
properties (text-start, gap-x, border-inline-start)
Why
RTL text like Arabic and Hebrew was unreadable when mixed with
English. Punctuation jumping around, words in wrong order.
dir="auto" lets the browser figure out direction per element
from the first strong character, which is the standard fix for this.
Addresses #1771
UI Changes
Before
before.mp4
After
after.mp4
Checklist
Note
Low Risk
Presentation-only CSS and HTML attributes with no auth, data, or API changes; main risk is minor layout regressions in edge LTR cases.
Overview
Improves readability of mixed RTL/LTR content (e.g. Arabic, Hebrew with English) by letting the browser infer text direction per block instead of forcing LTR everywhere.
dir="auto"is added on chat markdown, the composerContentEditable, plan sidebar copy (explanations, steps, titles), thread titles in the sidebar and header, pending user-input questions/options, plan banners/cards, and archived thread titles in settings.index.cssaddsunicode-bidi: plaintexton chat markdown prose and on.user-message-text/.composer-editor-bidifor per-line direction in pre-wrap text; keepspre/code/tableLTR withunicode-bidi: isolate. List/blockquote/table styling switches to logical properties (padding-inline-start,border-inline-start,text-align: start).A few controls use
text-startinstead oftext-leftso alignment follows layout direction in RTL.Reviewed by Cursor Bugbot for commit 3cc50de. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add bidirectional text support for RTL languages across chat UI components
dir="auto"to text-bearing elements across chat components (ChatMarkdown,ComposerPromptEditor,PlanSidebar,ChatHeader, sidebar thread titles, plan cards, and archived thread settings) so each element auto-detects RTL/LTR direction from its content.unicode-bidi: plaintexton text elements in.chat-markdownfor per-paragraph direction detection, forcesdirection: ltron code blocks and tables, and switches list/blockquote spacing to logical CSS properties (padding-inline-start,border-inline-start).text-leftclass totext-startinPlanSidebarfor logical alignment in bidi contexts.📊 Macroscope summarized 3cc50de. 10 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted
🗂️ Filtered Issues
No issues evaluated.