Two visual issues in the "إرسال الملاحظة" dialog:
1. The shadcn DialogContent renders a built-in close (X) button hard
pinned at `right-4 top-4`. In Arabic the dialog title is
right-aligned and crashed into the X.
Fix: add `pe-8` to the SendNoteDialog header so the title row
reserves logical end-padding for the X in both directions. The
shared dialog component is unchanged so other dialogs are untouched
(out of scope per the task plan).
2. The recipient search field used inline `style={{ right|left: 10 }}`
for the magnifier and a conditional `pe-9` / `ps-9` based on
`i18n.language`. In RTL the icon collided with the placeholder.
Fix: drop the conditional branching — position the icon with the
logical class `start-2.5` and always pad the input with `ps-9`.
The icon now sits at the inline-start edge in both LTR and RTL
with a clear gutter to the placeholder/caret.
Skipped step 3 of the plan (i18n aria-label override on the X). It
required no locale changes and no rendering improvement, so per the
plan's own conditional ("only if step 3 keeps the override; otherwise
no locale changes") it was dropped to keep scope tight.
Verification:
- `pnpm exec tsc --noEmit` clean.
- Playwright: `notes-inbox.spec.mjs` (1/1) and
`notes-popup-touch-tap.spec.mjs` (2/2) green — both exercise the
send-note dialog rendering. `notes-popup-on-receive.spec.mjs` runs
two browser contexts and exceeds the local 120s shell cap; not
re-run here, but the diff is CSS-only and cannot affect the wire
flow it covers.
riyadhafraa
b5e063d6ed