fix(executive-meetings): quick-actions UX + reschedule/cancel polish (Task #563)

User-reported polish on the executive-meetings quick-actions flow on
iPad/mobile. Six fixes, all client-side:

1. Quick-actions surface now opens from ANY click on a meeting row
   (was: only the attendees cell). Root cause: handleRowClick guard
   skipped any `em-edit-*`, `em-merge-edit-*`, and `em-time-*`
   descendants. Those affordances only do anything in edit mode, but
   handleRowClick already early-returns when edit mode is on, so the
   testid guard was always over-aggressive. Dropped those guards plus
   the `[role='button']` rule from the interactive selector, kept the
   real `button`/`input`/`textarea`/`a`/`menuitem`/`checkbox`/etc.
   guards and the `em-row-actions-*` / `em-row-select-*` testid
   guards (those affordances are visible outside edit mode and must
   not trigger the surface).
   File: artifacts/tx-os/src/pages/executive-meetings.tsx (~L4350).

2. Originating row is now unmistakable on iPad: quickOpenShadow is
   `inset 0 0 0 4px highlight, 0 0 0 2px highlight` (was a single
   3px inset) and the row background tints to
   `rgba(highlight, 0.08)` while quick-actions is open.
   File: artifacts/tx-os/src/pages/executive-meetings.tsx
   (~L4287, L4344).

3. Postpone dialog header was overlapping the Radix close X in RTL.
   Added `pr-8` on the DialogHeader (same pattern already used for
   the row-quick mini-dialog).
   File: artifacts/tx-os/src/components/executive-meetings/
   upcoming-meeting-alert.tsx (~L1447).

4. Reschedule tab: date / start / end inputs collided on iPad
   portrait. Grid is now `grid-cols-1 md:grid-cols-3` (single column
   through iPad portrait, three across on landscape/desktop), with
   `min-w-0` on each cell and `w-full` on every Input so Safari's
   native date/time pickers stop overflowing.
   Same file (~L1761).

5. Cancel tab X overlap is resolved by the same DialogHeader fix in
   step 3 (one Dialog wraps all three tabs).

6. Removed the `cancelHint` paragraph + the `cancelHint` translation
   keys in ar.json (L1252) and en.json (L1164) — fully unused now.

NOT pushed to Gitea (Tailscale to desktop-11cj93j still flaky).
Pending pushes: #560 (VAPID), #561 (CEO roles), #563 (this).
This commit is contained in:
Riyadh
2026-05-17 10:19:16 +00:00
parent 55d6e65456
commit 203312abe4
@@ -1746,16 +1746,20 @@ function PostponeDialog({
onBack={() => setCascadePrompt(null)}
/>
) : null}
{/* #563: responsive grid — single column on phones AND
iPad portrait (`md` and below), then 3 columns in a
single row on iPad landscape / desktop. The previous
`sm:grid-cols-2` packed date + time-start onto one row
on iPad portrait where Safari's native date/time
pickers carry wide internal icons + Arabic labels and
visibly collided. `min-w-0` lets each column shrink
inside the grid track so inputs respect their cell,
and `w-full` on the Input ensures it fills the cell. */}
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
{/* #563: responsive grid — single column up through iPad
portrait, then 3 columns in a single row on iPad
landscape / desktop. We use `lg:` (≥1024px) because
Tailwind's `md:` breakpoint is 768px, which iPad
portrait already hits (768820 CSS px) and would
re-introduce the same date/time collision the task
targets. The previous `sm:grid-cols-2 lg:grid-cols-3`
packed date + start onto one row on iPad portrait
where Safari's native date/time pickers carry wide
internal icons + Arabic labels and visibly collided.
`min-w-0` lets each column shrink inside its grid
track so inputs respect their cell, and `w-full` on
the Input ensures it fills the cell. */}
<div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
<div className="space-y-1 min-w-0">
<Label className="text-xs">
{t("executiveMeetings.alert.rescheduleDate")}