From edd2dfdec02a8ba6ce794d0cc3a3ee7dad085993 Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Tue, 19 May 2026 08:08:05 +0000
Subject: [PATCH] #606: fix reschedule Start/End time inputs visual overlap on
 iPad
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../executive-meetings/upcoming-meeting-alert.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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 d4707823..cc85c049 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
@@ -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>