#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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user