rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve reschedule dialog layout and input styling on mobile devices

Browse Source 
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.
This commit is contained in:
Riyadh
2026-05-19 19:42:13 +00:00
parent acd3190554
commit a7d82d68ef
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx
+20 -21
View File
@@ -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>