Chat bubble RTL layout
An AI agent wrote this CSS for a chat-message bubble, and the product is about to launch in Arabic and Hebrew markets. It looks correct in the English build. What will break in right-to-left locales, and what's the corrected approach?
Implement
rewrite_to_logical_properties(declarations: list[str]) → list[str]Examples
in
[["margin-left: 48px","padding-right: 12px","text-align: left","border-left: 3px solid var(--accent)","float: right"]]out["margin-inline-start: 48px","padding-inline-end: 12px","text-align: start","border-inline-start: 3px solid var(--accent)","float: inline-end"]in
[["margin-top: 8px","text-align: center","color: var(--ink)"]]out["margin-top: 8px","text-align: center","color: var(--ink)"]in
[["left: 0","right: 12px"]]out["inset-inline-start: 0","inset-inline-end: 12px"]What a strong answer looks like
Treat the AI’s output as a draft to verify, not an answer to trust. Name the specific flaw and the input that triggers it, say how you’d catch it (tests, edge cases, reading critically), and how you’d re-prompt or decompose to get it right.
0:00 of about 16 min
Vibe & agentic: describe the solution in plain language (or narrate it) and the coach grades your approach.
Which questions mattered is sealed until you submit. Telling you now would just be handing over the edge cases.
Run or narrate your approach, then ask the coach.