Repository navigation
UI Consistency: 1 issue found
1 finding
apps/web/src/components/ChatMarkdown.tsx(lines 2151-2154): the GitHub-alert title paragraph is forced todir="ltr", so in an RTL message the icon + label stay pinned to the left edge while the newly logicalborder-s-2 ps-3rail and the body text sit on the inline start (right) — the alert title detaches from its own rail. Isolating only the label (<bdi>) keeps it out of the rootdir="auto"resolution without overriding the block direction; the companion assertion inMessagesTimeline.test.tsxneeds updating.
The rest of the in-scope changes are consistent: index.css markdown rules were converted to logical properties (padding-inline-start, margin-inline, border-inline-start, text-align: start) with no remaining direction-sensitive physical declarations under .chat-markdown, and dir="ltr" on code, pre, the table container and file chips correctly excludes machine content from the root dir="auto" resolution while dir="auto" on th/td resolves per cell.
Details
Note
Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.
Method:
- Reviewed the full diff, then read
apps/web/src/components/ChatMarkdown.tsxat head (alert/blockquote, table, code block, file link, details, root renderer) and the complete.chat-markdownblock ofapps/web/src/index.css. - Grepped
ChatMarkdown.tsxandindex.cssfor remaining physical-direction declarations/utilities (pl-/pr-/ml-/mr-/border-l/border-r/text-left/text-right,padding-left,border-left,text-align: left) that the newdir="auto"root makes reachable..chat-markdown a:not(.chat-markdown-file-link)still usesbackground-position: left bottom, but withbackground-repeat: repeat-xthe dotted underline covers the full inline box in either direction — not a regression.chat-markdown-codeblock-header(pr-1.5 pl-3) sits inside thedir="ltr"code block container, so its physical padding is correct.MarkdownDetails's triggertext-left(line 746, unchanged and outside the diff) can left-align a wrapped RTL summary; too marginal to report and not commentable inline.
- Confirmed the prior run's footnote-list
paddingfinding is resolved:.chat-markdown section[data-footnotes] olnow only resetsmargin, so.chat-markdown ol { padding-inline-start: var(--list-gutter, 1.25rem) }and theorderedListGutterStyleinline custom property still apply. - Checked
ChatMarkdowncall sites (MessagesTimeline,ProposedPlanCard,PullRequestMarkdown,FileMarkdownPreview) for wrapper classes that would break under an RTL-resolving root; none pass direction-sensitive geometry. - Verified the HTML
dir="auto"contained-text algorithm skips descendants with adirattribute andbdielements, which is what makes both the existingdir="ltr"markers and the suggested<bdi>fix work.
🔍 Agent activity — 13 tool calls
💭 I'm checking whether the previously flagged issues, like the footnote padding rule and blockquote alert styling, have already been resolved in the current diff. Now I'm reviewing the remaining changes in the web app's ChatMarkdown component and CSS, which add direction attributes for RTL/LTR handling and convert physical CSS properties to logical ones for lists, blockquotes, and text alignment. I want to double-check index.css and ChatMarkdown for any lingering physical LTR properties that could break rendering now that dir="auto" is in place, so I'll look at those files directly.
1. browse_code — apps/web/src/index.css
2. git_tools — apps/web/src/index.css 9b2d043..39da1ee
💭 Checking other physical-LTR issues that dir="auto" affects—the hover underline style using left/bottom positioning with repeat-x actually fills the whole line regardless of direction, so it's not a real problem. I'm now scanning ChatMarkdown.tsx for other physical Tailwind classes that might need direction-aware treatment.
3. git_tools — (pl-|pr-|ml-|mr-|border-l|border-r|left-|right-|text-left|text-right|rounded-l|rounded-r)
💭 The codeblock header at line 869 sits fine within the LTR container. Now I'm checking line 746, a collapsible details/summary toggle with text-left styling — since it's rendered markdown content under a dir="auto" root, this physical left-alignment would force the summary text to stay left-aligned even in RTL messages. I should also check other markdown-related components like MessagesTimeline and the chat-markdown-file-link rendering, plus the dir="auto" root placement around line 2484, to see if this same issue recurs.
4. browse_code — apps/web/src/components/ChatMarkdown.tsx
💭 MarkdownDetails already uses logical padding, and while flex-direction reverses under RTL so the chevron shifts to the right, text-left barely matters since spans size to their content. Not worth flagging as an issue. Next I want to check the root dir="auto" placement and how MessagesTimeline uses it, so I'll look at ChatMarkdown around lines 2450-2500 and the alert rendering there.
5. browse_code — apps/web/src/components/ChatMarkdown.tsx
6. browse_code — apps/web/src/components/ChatMarkdown.tsx
💭 I'm thinking through how
dir="auto"on the root works — it picks direction based on the first strong directional character in the text, but skips descendants that have their own explicitdirattribute, which is why settingdir="ltr"on code/pre blocks matters here. The[dir]UA stylesheet rule also appliesunicode-bidi: isolateautomatically, so inline code withdir="ltr"becomes properly isolated. I'm also verifying the task list checkbox margin conversion from physical to logical properties produces identical results in LTR, then scanning the rest of.chat-markdownfor other physical-property rules that might conflict with the newdir=autobehavior.
7. git_tools — chat-markdown
8. git_tools — chat-markdown
💭 I notice the line numbers between my earlier view of index.css and the grep results don't match up, which is odd since I'm looking at the same revision. It's unclear why the discrepancy exists, but the actual rule content is consistent between both, so I'll proceed with that. The diff hunk headers align with what I saw in the view, so I should trust the view's line numbers for the PR head when posting inline comments — the grep may have resolved against a different branch state. I want to check the file-link markdown rendering next, and think about how direction resolution handles code spans versus regular text on mobile compared to web. Recalling the HTML spec's dir="auto" algorithm: the browser walks the element's text in tree order looking for the first strong directional character, but skips over descendant elements that are bdi, script, style, textarea, or have their own dir attribute set. That distinction matters for comparing how the mobile and web implementations handle nested spans differently. So adding dir="ltr" to code and pre blocks means they'll get excluded from that root-direction search, matching mobile's approach of stripping direction contribution from code content. Now I want to check where MarkdownFileLink and inline code elements pick up dir="ltr" in the codebase, since that's the specific mechanism worth verifying against the mobile implementation. This confirms isolation applies correctly, so table structure stays LTR while individual cells with dir="auto" resolve independently based on content—text-align:start correctly maps to right for RTL cells. I'm also considering the alert title paragraph forced to dir="ltr" since it's a hardcoded English label like "Note". That forced LTR direction also sets the flex container's direction, which could misalign the title's icon+label at the left edge of an otherwise RTL block, detaching it visually from the border rail (which sits inline-start, on the right in RTL) and from the right-aligned body text below. This seems like a real inconsistency worth flagging. Actually wrapping in bdi doesn't solve it either since the label is English regardless of direction. The real issue may just be that removing dir="ltr" restores correct RTL flow since the icon is direction-neutral and the Latin text renders LTR naturally within it—so the simplest fix is likely just dropping that attribute. I'm now checking whether this is a genuine regression introduced by this PR's changed lines: since before the PR everything was LTR-only and now RTL messages get the rail flipped but the title pinned left, this inconsistency is new and worth flagging as a real finding rather than a nitpick. I notice the test explicitly asserts
dir="ltr"on the title, so this was intentional — likely because the label is always English text. Still, applyingdirto a block element affects layout alignment, not just text order, so a cleaner fix might be wrapping just the label text in an inlinebdi/span withdir="ltr"instead. I want to check the otherMarkdownFileLinkinstances usingdir="ltr"to see if they're inline elements where this concern wouldn't apply.
9. browse_code — apps/web/src/components/ChatMarkdown.tsx
💭 Those chips are inline-flex, so dir="ltr" is fine there. I'm checking whether other web components rendering markdown or chat content, like the messages timeline's user bubble alignment, also rely on physical CSS that might need direction handling, though the PR scope really only touches ChatMarkdown, which already gets dir=auto at the root. I'm also verifying edge cases: the hover background-position on links repeats full width regardless of direction, the table's min-width rule is unaffected, and copy behavior doesn't touch direction at all. Since ChatMarkdown appears in many surfaces beyond chat messages, applying dir="auto" globally seems intentional, and the details-trigger's text-align left shouldn't visibly break layout since the summary span is a content-sized flex item. Now I'm checking whether wrapped summary text could cause left-alignment issues in RTL, though that's a minor edge case. I also confirmed the code block header's physical padding is fine since it's inside a forced LTR container, and the previous footnote padding concern is now resolved in the current diff. I'm continuing to grep for physical positioning classes like text-left/text-right and absolute positioning within markdown-rendered content, now looking at an artifact template card icon badge that uses a flex row layout which could interact oddly with RTL inheritance. I want to trace through the artifact card's full layout to see if flipping icon/text order under RTL actually breaks anything, though I'm keeping the analysis focused. I'm also checking that the markdown table's toolbar stays consistently left-to-right regardless of direction, and confirming the
preelement's forced LTR direction keeps horizontal scrolling starting from the correct side. Now I'm turning to a potentially larger issue with howdir="auto"interacts with the overflow-wrap behavior on the root container. I'm considering that inline code forced to LTR direction is intentional, since code should read left-to-right even when it contains Hebrew text -- though this does mean mixed RTL/code content inside a paragraph gets reordered, which seems like the expected tradeoff. I'm now checking the checkbox styling for task list items to see if the margin handling causes any directional issues. Turning to index.css, I'm scanning for physical (non-logical) properties still lingering in the chat-markdown scope around lines 1577-1858 -- most seem fine, like the background-position for underline dots since it's repeated across the full width. I don't see problems with the footnote backref arrows or codeblock headers since they're contained within an LTR wrapper. The CSS side looks complete overall, so now I want to double-check for other markdown-related styling I might have missed, like shiki line numbers or markdown details elements, by searching index.css for "markdown".
10. git_tools — markdown|message-|prose
💭 The CSS conversion looks consistent, and the ellipsis behavior in collapsed cells still works fine with per-cell dir=auto. I'm now thinking about how the root dir="auto" on ChatMarkdown affects all its other consumers, like tool-call outputs, diagnostics, and plan text. I should check whether any call sites pass physical-direction utility classes via className that could break under RTL, though I want to keep my review focused on concrete regressions rather than speculative scope. Let me search for ChatMarkdown usages with className to verify.
11. git_tools — <ChatMarkdown
💭 The markdown file preview already uses dir="auto", so that's fine. I'm now weighing whether I have a strong enough finding, checking other candidates like the MarkdownTable container's dir="ltr" setting on the table wrapper class. I want to double-check that the inline code renderer's dir="ltr" attribute isn't accidentally applied redundantly inside pre blocks, though that would be harmless either way. The chips and file link labels already carry dir="ltr", so the root's dir="auto" correctly skips them when detecting the first strong directional character, matching the mobile behavior. Since only the root element gets dir="auto", a message with a mixed opening — like an English lead-in followed by a Hebrew paragraph — resolves as LTR for the whole message, consistent with mobile's per-message resolution. Looking closer at the alert component, the note's
role="note"div inherits RTL direction from the root, but its title paragraph is forced to dir="ltr", making the flex container's start edge shift to the left for the icon and label while the body paragraphs remain right-aligned as RTL — producing a real visual inconsistency where the title sits left and body sits right. Their test expects that ltr attribute on the title, presumably to keep the English "Note"/"Warning" label reading correctly, though since the label uses Latin script it's unclear how much the directionality is truly needed beyond affecting flex ordering. Under RTL, the flex row reverses so the icon ends up on the right of the label, which is actually correct for RTL (icon at inline-start = right). So dropping dir="ltr" would give a properly consistent RTL alert. I'm fairly confident this is a legitimate, minor finding — the fix would be removing dir="ltr" from the title paragraph, wrapping the label in a bdi element if isolation is still wanted, and updating the corresponding test assertion in MessagesTimeline.test.tsx that checks for that attribute. I'm weighing whether this is too cosmetic to flag, but since the PR intentionally made this container direction-aware, the mismatch between the rail/gutter using inline-start and the title using a hardcoded physical direction feels like a concrete, reportable violation rather than a stylistic nitpick. Now I want to check whether other findings exist — specifically looking at how the code renderer applies dir="ltr", whether it's scoped to inline code only or all code blocks, and whether that could interfere with the data-inline-code selection/copy behavior around lines 2300-2360.
12. browse_code — apps/web/src/components/ChatMarkdown.tsx
💭 I notice the shiki fallback pre element already has dir="ltr" set, which is redundant but not harmful. Then I'm considering the MarkdownDetails trigger's text-left class - it's pre-existing but the PR makes RTL layout relevant to it, so per the instructions I should flag pre-existing behavior that the patch makes newly relevant. Working through whether text-left on the details summary is a genuine regression: since the summary is a flex item sized to content, a wrapping long summary would fill the available width and then left-align its text, creating a mismatch when the body content below is right-aligned in RTL. It's a minor issue but the same category as the alert title problem, so I'm weighing whether to flag both or just focus on the primary alert finding to avoid noise. I'll lean toward flagging the alert title as the main comment. I'm checking that line 746 isn't in the diff hunks so I can't leave an inline comment there and will skip it as marginal, but line 2153 with the dir="ltr" attribute is within a valid diff hunk, so I'll target the alert title fix there and start drafting the code suggestion for that section. Wrapping the alert label in a bdi element, dropping dir="ltr", and removing it from the p tag... but I realize this would break the MessagesTimeline test that asserts on that exact dir="ltr" attribute, so I need to flag that the test assertion also needs updating. Since the fix requires a companion test update, it's not fully self-contained, so I should present it as a unified diff rather than an inline suggestion. Let me double-check that the alert body's child paragraph elements actually inherit rtl direction from the parent note div, which itself inherits dir=auto from the chat-markdown container. Actually that's likely the real functional reason: without dir="ltr" on the label, the synthesized English "Note" text would become the first strong character and force the whole message LTR. Since the label is synthesized chrome rather than user content, it needs a dir attribute to be skipped from the root's auto resolution — but dir="auto" itself would still resolve to ltr from "Note" and cause the same left-pinning issue. A
<bdi>wrapper might work instead, since bdi elements are also skipped by the root's auto-directionality algorithm. Confirming that HTML's auto-directionality algorithm explicitly ignores text inside descendant bdi elements, so wrapping the label in<bdi>keeps it out of the root's resolution while letting the paragraph inherit block direction normally. This matches the mobile-side approach of stripping alert markers via a regex, so the fix is to drop dir="ltr" from the paragraph and wrap the label in bdi instead — I should note this reasoning in my comment explaining why dir="ltr" was originally needed and why bdi preserves the intended behavior. Now I'm checking the exact indentation of the existing JSX block so I can craft a precise diff for the note/alert element, matching the 10/12/14-space nesting levels. This looks like a real regression risk, so I'll mark the check state as failure given the findings. I need to figure out the correct line numbers for the inline comment—checking whether lines 2151, 2152, and 2154 actually appear in the diff hunk before anchoring the comment there. I want to explain clearly whydir="ltr"breaks the RTL layout: it forces the icon and label to stay pinned left while the rail and body text shift right, detaching the title from the quote rail. I'll also note that<bdi>would preserve the original purpose of excluding the synthesized label fromdir="auto"resolution without causing this side effect.
13. modify_pr — One finding on the GitHub-alert title: forcing dir="ltr" on the title paragraph pins it to the left edge of an otherwise RTL note block, detaching it from the border-s-2 rail this PR just made direction-aware. The rest of the web changes (logical properties in index.css, dir="ltr" on code/pre/table/file chips, dir="auto" on cells and the markdown root) look consistent.
Agent Credits: 130 credits
Token usage: 22 uncached input · 534,878 cache-read input · 89,961 cache-write input · 16,309 output
Agent Credits may also include non-token charges from external tools such as web research.