From ee6c2c72eee264a6ccab8fea3c0a77d0435c6737 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Wed, 20 May 2026 06:57:30 +0000
Subject: [PATCH] Update meeting alert to prevent overlapping time inputs

Modify executive meeting alert component to ensure time inputs stack vertically on all screen sizes, preventing overlap.
---
 .../upcoming-meeting-alert.tsx                | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 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 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. */}
-            <div className="space-y-2 sm:space-y-3">
+            {/* 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. */}
+            <div className="space-y-2">
               <div className="space-y-1 min-w-0">
                 <Label className="text-xs font-semibold text-slate-700">
                   {t("executiveMeetings.alert.rescheduleDate")}
@@ -1783,43 +1791,34 @@ function PostponeDialog({
                   onChange={(e) => setResDate(e.target.value)}
                   disabled={busy !== null}
                   data-testid="reschedule-date"
-                  className="w-full h-10 bg-white border border-slate-300 rounded-lg text-sm px-3"
+                  className="w-full max-w-xs h-9 bg-white border border-slate-300 rounded-md text-sm px-2.5"
                 />
               </div>
-              {/* #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. */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
-                <div className="space-y-1 min-w-0">
-                  <Label className="text-xs font-semibold text-slate-700">
-                    {t("executiveMeetings.alert.rescheduleStart")}
-                  </Label>
-                  <Input
-                    type="time"
-                    value={resStart}
-                    onChange={(e) => 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"
-                  />
-                </div>
-                <div className="space-y-1 min-w-0">
-                  <Label className="text-xs font-semibold text-slate-700">
-                    {t("executiveMeetings.alert.rescheduleEnd")}
-                  </Label>
-                  <Input
-                    type="time"
-                    value={resEnd}
-                    onChange={(e) => 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"
-                  />
-                </div>
+              <div className="space-y-1 min-w-0">
+                <Label className="text-xs font-semibold text-slate-700">
+                  {t("executiveMeetings.alert.rescheduleStart")}
+                </Label>
+                <Input
+                  type="time"
+                  value={resStart}
+                  onChange={(e) => 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"
+                />
+              </div>
+              <div className="space-y-1 min-w-0">
+                <Label className="text-xs font-semibold text-slate-700">
+                  {t("executiveMeetings.alert.rescheduleEnd")}
+                </Label>
+                <Input
+                  type="time"
+                  value={resEnd}
+                  onChange={(e) => 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"
+                />
               </div>
             </div>
             <Textarea
@@ -1829,7 +1828,7 @@ function PostponeDialog({
               disabled={busy !== null}
               rows={2}
               data-testid="reschedule-note"
-              className="w-full bg-white border border-slate-300 rounded-lg text-sm px-3 py-2"
+              className="w-full bg-white border border-slate-300 rounded-md text-sm px-2.5 py-2"
             />
             <Button
               type="button"
@@ -1837,7 +1836,7 @@ function PostponeDialog({
               onClick={onReschedule}
               disabled={busy !== null || !resDate || !resStart || !resEnd}
               data-testid="reschedule-apply"
-              className="h-10 rounded-lg px-5 text-sm"
+              className="h-9 rounded-md px-5 text-sm"
             >
               {t("executiveMeetings.alert.rescheduleApply")}
             </Button>