Task #431: polish Send Note dialog (RTL X + search overlap)

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 `pr-8` to the SendNoteDialog header so the title row
   reserves physical right-padding matching where the X actually
   lives in both LTR and RTL. (Initially used `pe-8` but corrected to
   `pr-8` after code review noted the close button is pinned with
   physical `right-4`, so a logical end-padding flips to the wrong
   side in RTL.) 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.
This commit is contained in:
riyadhafraa
2026-05-07 09:03:28 +00:00
parent b5e063d6ed
commit ea3092bb2b
+1 -1
View File
@@ -1644,7 +1644,7 @@ function SendNoteDialog({
return (
<Dialog open onOpenChange={(o) => !o && onClose()}>
<DialogContent className="max-w-md" data-testid="send-note-dialog">
<DialogHeader className="pe-8">
<DialogHeader className="pr-8">
<DialogTitle>{t("notes.sendNote", "Send note")}</DialogTitle>
</DialogHeader>
<div className="relative">