fix: resolve mobile reversed text alignment issue - #9
Conversation
|
@itspankajdeveloper is attempting to deploy a commit to the chtnnh's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
chtnnh
left a comment
chtnnh
left a comment
There was a problem hiding this comment.
Thanks for opening this, @pankajsinghdeveloper26 — and welcome to the repo. This is a strong first GitHub PR: focused scope, a clear description, and all CI checks green (lint, typecheck, E2E, visual, Vercel preview). Bugbot also reported no bugs on the diff. Nice work.
The fix direction looks right for the reported issue. Below is everything we noticed so you can land a quick follow-up (or we can merge with a small cleanup on our side).
What looks good
dir="ltr"on the message list — sensible fix when chat text inherits RTL on some mobile locales even though the app is English.inline-blockon the message body span — helps when@mentionparsing splits a line into mixed text +<span>nodes (common bidi/WebKit edge case).- Scope — one file, chat-only; existing tests still pass.
Suggested changes (direct fixes)
1. Trim redundant CSS (keep the fix, drop the noise)
dir="ltr" already sets direction. These are redundant or speculative:
- Remove
[direction:ltr]wherever you also havedir="ltr". - Remove
[transform:none]— nothing in our chat stack applies transforms to message text. text-leftis optional; fine to keep on the container, but you don’t need it on every nested element.
Minimal pattern we’d prefer:
// Scroll container
<div
ref={containerRef}
onScroll={handleScroll}
dir="ltr"
className="min-h-0 flex-1 overflow-y-auto p-3 space-y-2"
>
// Per message — one dir on the row is enough
<div
key={msg.id}
dir="ltr"
className={`text-sm ${mentionedYou ? "rounded-md bg-[var(--accent)]/10 px-2 py-1" : ""}`}
>
...
<span className="inline-block [unicode-bidi:isolate]">
{renderMessageBody(msg.body, currentParticipantId, participants)}
</span>
</div>([unicode-bidi:isolate] is optional but a bit cleaner than stacking dir on three levels.)
2. Revert unrelated formatting churn
Please undo style-only edits so the diff stays easy to review:
- Trailing comma removals (e.g.
</span>,→</span>) createPortal(..., document.body)comma changementionMatchesfilter formatting<form>attribute line break
Also restore the newline at EOF on emoji-chat.tsx.
3. Chat input — was typing affected too?
This PR only touches ChatMessages, not ChatInput. If the mirrored/reversed text also happened while typing in the input, add the same fix there:
<input
...
dir="ltr"
className="min-w-0 flex-1 ... text-left"
/>If input was fine and only rendered messages were wrong, a one-line note in the PR description is enough.
4. Optional follow-up (not blocking)
dir="ltr"on<html lang="en">inlayout.tsxwould fix RTL inheritance app-wide; chat-onlydiris fine for this PR.- Longer term,
dir="auto"per message would respect Arabic/Hebrew chat; forcing LTR everywhere is OK for our English-first UI for now.
Regression / product notes (for your awareness)
| Area | Risk |
|---|---|
| @mentions, emoji | Low |
| Mobile keyboard / scroll | None (no layout changes) |
| Desktop sidebar chat | Low (same component) |
| RTL-language chat messages | Forced LTR won’t auto-flow RTL — acceptable for us today |
We don’t expect a Playwright test for bidi mirroring; manual check on a device/locale where you saw the bug is the best verification.
Summary
Verdict: Approve in principle — please push a small cleanup (items 1–2, and 3 if input was affected). Happy to merge right after that.
Thanks again for contributing — hope to see more from you.
chtnnh
left a comment
chtnnh
left a comment
There was a problem hiding this comment.
The mobile mirroring symptom is real, but this fix is too local and mixes unrelated formatting churn. Please address the root cause once (document/layout direction), add regression coverage, and drop the redundant per-node overrides.
| ref={containerRef} | ||
| onScroll={handleScroll} | ||
| className="min-h-0 flex-1 overflow-y-auto p-3 space-y-2" | ||
| dir="ltr" |
There was a problem hiding this comment.
Stacking dir="ltr" + [direction:ltr] on the scroll container is redundant — pick one mechanism. More importantly, if chat should always be LTR, set dir="ltr" on <html> in layout.tsx (or a room-level wrapper) instead of sprinkling it through every message node.
| key={msg.id} | ||
| className={`text-sm ${mentionedYou ? "rounded-md bg-[var(--accent)]/10 px-2 py-1" : ""}`} | ||
| dir="ltr" | ||
| className={`text-sm text-left [direction:ltr] [transform:none] ${ |
There was a problem hiding this comment.
[transform:none] on three nested wrappers is unlikely to fix reversed glyph order (that’s a bidi/direction issue, not a CSS transform). Can you confirm this was tested on the failing device, or remove it if it’s speculative?
| <span className="font-medium text-[var(--accent)]">{msg.senderName}</span> | ||
| <span className="mx-1 text-[var(--text-muted)]">·</span> | ||
| <span>{renderMessageBody(msg.body, currentParticipantId, participants)}</span> | ||
| <span dir="ltr" className="inline-block [direction:ltr] [transform:none]"> |
There was a problem hiding this comment.
Third layer of dir="ltr" on the body span — if we need this depth, the fix is probably at the wrong layer. Prefer one explicit LTR island at the chat panel root (ChatMessages + ChatInput) rather than per-message + per-span.
| > | ||
| @{matched.displayName} | ||
| </span>, | ||
| </span> |
There was a problem hiding this comment.
Unrelated trailing-comma removals (</span>, → </span>) and formatting-only edits elsewhere in the file add review noise. Please revert anything that isn’t required for the mirroring fix.
| </ul> | ||
| )} | ||
| </form> | ||
| ); |
There was a problem hiding this comment.
File now ends without a trailing newline — Biome/CI will flag this once --error-on-warnings is enabled on the merge-gate branch.
|
just commenting to see if CI gets triggered by this :/ |
Resolve emoji-chat.tsx conflicts by keeping main (RTL/dir=ltr fixes and merge-gate chat refactors already cover the mirroring issue).
3 participants
Description
Fixed a UI issue where chat messages rendered in reverse/mirrored text order on mobile devices.
Changes
dir="ltr"and[direction:ltr]attributes on the message container and individual message wrappers inemoji-chat.tsx.[transform:none]and explicittext-leftalignment to prevent mobile viewport layout transforms.