#577: clean up reschedule dialog layout on iPad landscape

The Postpone dialog's "إعادة الجدولة" tab was packing Date + Start +
End into a single 3-column row at `lg:` (≥1024 px), which on iPad
landscape (and small desktops) made iOS Safari's native date/time
spinner glyphs + Arabic AM/PM markers visibly collide between cells.
User reported the boxes looked "غير مرتبه".

Change:
- artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx:
  replace the `grid grid-cols-1 gap-3 lg:grid-cols-3` wrapper with a
  vertical `space-y-3` stack: Date input on its own full-width row,
  then a `grid grid-cols-2 gap-3` row holding Start + End side-by-
  side. Same `min-w-0` + `w-full` discipline on every cell so inputs
  respect their track.
- Updated the explanatory comment to record why we no longer try a
  3-column path: the only layout that stays clean from 320 px phones
  up through desktop without depending on a custom picker is the
  Date-on-top / Start+End-below stack.

Verified `tsc --noEmit` clean. No DB / locale / API changes. Mac
rebuild = `git pull && ./start.sh rebuild && docker compose up -d
--force-recreate web`. No script run needed.

artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx

@@ -1746,20 +1746,21 @@ function PostponeDialog({
                 onBack={() => setCascadePrompt(null)}
               />
             ) : null}
-            {/* #563: responsive grid — single column up through iPad
-                portrait, then 3 columns in a single row on iPad
-                landscape / desktop. We use `lg:` (≥1024px) because
-                Tailwind's `md:` breakpoint is 768px, which iPad
-                portrait already hits (768–820 CSS px) and would
-                re-introduce the same date/time collision the task
-                targets. The previous `sm:grid-cols-2 lg:grid-cols-3`
-                packed date + start onto one row on iPad portrait
-                where Safari's native date/time pickers carry wide
-                internal icons + Arabic labels and visibly collided.
-                `min-w-0` lets each column shrink inside its grid
-                track so inputs respect their cell, and `w-full` on
-                the Input ensures it fills the cell. */}
-            <div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
+            {/* #577: Date on its own full-width row, Start + End
+                side-by-side on the row below — at every breakpoint.
+                Earlier (#563) we tried `grid-cols-1 lg:grid-cols-3`
+                to avoid iPad portrait collisions but on iPad
+                landscape (≥1024 px) the 3-column path still packed
+                Date + Start + End into one row, where iOS Safari's
+                native date/time spinner glyphs and Arabic AM/PM
+                markers visibly collided. Keeping Date alone on top
+                and pairing the two times below is the only layout
+                that stays clean from 320 px phones up through
+                desktop without depending on a custom picker.
+                `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 min-w-0">
                 <Label className="text-xs">
                   {t("executiveMeetings.alert.rescheduleDate")}
@@ -1773,31 +1774,33 @@ function PostponeDialog({
                   className="w-full"
                 />
               </div>
-              <div className="space-y-1 min-w-0">
-                <Label className="text-xs">
-                  {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"
-                />
-              </div>
-              <div className="space-y-1 min-w-0">
-                <Label className="text-xs">
-                  {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"
-                />
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1 min-w-0">
+                  <Label className="text-xs">
+                    {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"
+                  />
+                </div>
+                <div className="space-y-1 min-w-0">
+                  <Label className="text-xs">
+                    {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"
+                  />
+                </div>
               </div>
             </div>
             <Textarea