From a7d82d68ef2965bd4eed6a17019a144773b1ecb0 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Tue, 19 May 2026 19:42:13 +0000
Subject: [PATCH] Improve reschedule dialog layout and input styling on mobile
 devices

Update styling for date and time inputs in the reschedule dialog to improve mobile responsiveness and visual appearance, including stacking elements on smaller screens and adjusting input sizes.
---
 .../upcoming-meeting-alert.tsx                | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 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 c60a6145..59c78471 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,9 +1772,9 @@ 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-3">
-              <div className="space-y-1.5 min-w-0">
-                <Label className="text-xs sm:text-sm font-semibold text-slate-700">
+            <div className="space-y-2 sm:space-y-3">
+              <div className="space-y-1 min-w-0">
+                <Label className="text-xs font-semibold text-slate-700">
                   {t("executiveMeetings.alert.rescheduleDate")}
                 </Label>
                 <Input
@@ -1783,20 +1783,19 @@ function PostponeDialog({
                   onChange={(e) => setResDate(e.target.value)}
                   disabled={busy !== null}
                   data-testid="reschedule-date"
-                  className="w-full min-h-11 bg-white border-2 border-slate-300 rounded-xl text-base"
+                  className="w-full h-10 bg-white border border-slate-300 rounded-lg text-sm px-3"
                 />
               </div>
-              {/* #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-1 sm:grid-cols-2 gap-3 sm:gap-6">
-                <div className="space-y-1.5 min-w-0">
-                  <Label className="text-xs sm:text-sm font-semibold text-slate-700">
+              {/* #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
@@ -1805,11 +1804,11 @@ function PostponeDialog({
                     onChange={(e) => setResStart(e.target.value)}
                     disabled={busy !== null}
                     data-testid="reschedule-start"
-                    className="w-full min-h-11 bg-white border-2 border-slate-300 rounded-xl text-base"
+                    className="w-full h-10 bg-white border border-slate-300 rounded-lg text-sm px-3"
                   />
                 </div>
-                <div className="space-y-1.5 min-w-0">
-                  <Label className="text-xs sm:text-sm font-semibold text-slate-700">
+                <div className="space-y-1 min-w-0">
+                  <Label className="text-xs font-semibold text-slate-700">
                     {t("executiveMeetings.alert.rescheduleEnd")}
                   </Label>
                   <Input
@@ -1818,7 +1817,7 @@ function PostponeDialog({
                     onChange={(e) => setResEnd(e.target.value)}
                     disabled={busy !== null}
                     data-testid="reschedule-end"
-                    className="w-full min-h-11 bg-white border-2 border-slate-300 rounded-xl text-base"
+                    className="w-full h-10 bg-white border border-slate-300 rounded-lg text-sm px-3"
                   />
                 </div>
               </div>
@@ -1830,7 +1829,7 @@ function PostponeDialog({
               disabled={busy !== null}
               rows={2}
               data-testid="reschedule-note"
-              className="w-full bg-white border-2 border-slate-300 rounded-xl text-base"
+              className="w-full bg-white border border-slate-300 rounded-lg text-sm px-3 py-2"
             />
             <Button
               type="button"
@@ -1838,7 +1837,7 @@ function PostponeDialog({
               onClick={onReschedule}
               disabled={busy !== null || !resDate || !resStart || !resEnd}
               data-testid="reschedule-apply"
-              className="min-h-11 rounded-xl px-5"
+              className="h-10 rounded-lg px-5 text-sm"
             >
               {t("executiveMeetings.alert.rescheduleApply")}
             </Button>