diff --git a/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx b/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx index 59c78471..7c324c07 100644 --- a/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx +++ b/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx @@ -1772,7 +1772,15 @@ function PostponeDialog({ `min-w-0` lets each cell shrink inside its track so inputs respect their cell, and `w-full` on the Input ensures it fills the cell. */} -
+ {/* Final layout (#606 follow-up): each input gets its own + full-width row at EVERY breakpoint — phones, iPad portrait + AND iPad landscape — so the iOS native time pills can never + overlap. Inputs are kept compact (h-9, single border, + rounded-md, text-sm) so the stacked layout still feels + tight on a phone and doesn't push the Apply button below + the fold. The dialog itself remains a comfortable width on + large screens; only the field row is narrowed. */} +
- {/* #606 / iPad-portrait fix: stack the two time pickers - through `md` so iPad portrait (768) still gets one - pill per row — at 2 columns iOS Safari's native time - pills overlapped in the middle. Two columns return - from md+ (landscape iPad / desktop) where there's - enough room. Tighter min-h / border / radius give the - whole sheet a more compact, polished feel on phones. */} -
-
- - setResStart(e.target.value)} - disabled={busy !== null} - data-testid="reschedule-start" - className="w-full h-10 bg-white border border-slate-300 rounded-lg text-sm px-3" - /> -
-
- - setResEnd(e.target.value)} - disabled={busy !== null} - data-testid="reschedule-end" - className="w-full h-10 bg-white border border-slate-300 rounded-lg text-sm px-3" - /> -
+
+ + setResStart(e.target.value)} + disabled={busy !== null} + data-testid="reschedule-start" + className="w-full max-w-xs h-9 bg-white border border-slate-300 rounded-md text-sm px-2.5" + /> +
+
+ + setResEnd(e.target.value)} + disabled={busy !== null} + data-testid="reschedule-end" + className="w-full max-w-xs h-9 bg-white border border-slate-300 rounded-md text-sm px-2.5" + />