#606: fix reschedule Start/End time inputs visual overlap on iPad

Problem: In the "تأجيل الاجتماع" dialog's "إعادة الجدولة" tab, the two
<input type="time"> fields for Start and End rendered as iOS Safari's
native "pill" controls centered inside transparent, hairline-bordered
cells separated by only gap-3. On iPad the pills visually touched in
the middle of the row, so users perceived a single overlapping
control instead of two distinct inputs.

Fix in artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx:
- Increase the grid gap from gap-3 to gap-4 / sm:gap-6 so the two
  cells never visually merge regardless of viewport width.
- Add `min-h-11 bg-background border-2` to each Input so each cell
  has an explicit, clearly bounded box around the iOS native pill.
- Added an inline #606 comment explaining the iOS quirk so future
  edits don't revert the layout.

Scope: layout-only change to the reschedule tab. No changes to
reschedule logic, validation, cascade prompt, or the postpone/cancel
tabs.
This commit is contained in:
riyadhafraa
2026-05-19 08:08:05 +00:00
parent 1307d5052c
commit edd2dfdec0
@@ -1785,7 +1785,15 @@ function PostponeDialog({
className="w-full"
/>
</div>
<div className="grid grid-cols-2 gap-3">
{/* #606: iOS Safari renders <input type="time"> with its
own internal "pill" that sits centered inside the
field. With `gap-3` and `bg-transparent` the two
pills visually touched in the middle of the row on
iPad, making Start + End look like one overlapping
control. Larger gap + explicit white background +
thicker border + min-h gives each iOS pill its own
clearly-bounded box so the two never collide. */}
<div className="grid grid-cols-2 gap-4 sm:gap-6">
<div className="space-y-1 min-w-0">
<Label className="text-xs">
{t("executiveMeetings.alert.rescheduleStart")}
@@ -1796,7 +1804,7 @@ function PostponeDialog({
onChange={(e) => setResStart(e.target.value)}
disabled={busy !== null}
data-testid="reschedule-start"
className="w-full"
className="w-full min-h-11 bg-background border-2"
/>
</div>
<div className="space-y-1 min-w-0">
@@ -1809,7 +1817,7 @@ function PostponeDialog({
onChange={(e) => setResEnd(e.target.value)}
disabled={busy !== null}
data-testid="reschedule-end"
className="w-full"
className="w-full min-h-11 bg-background border-2"
/>
</div>
</div>