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

Update meeting alert to prevent overlapping time inputs

Browse Source 
Modify executive meeting alert component to ensure time inputs stack vertically on all screen sizes, preventing overlap.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c335095e-b4e4-4f20-a870-ec684d39d61e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/IO8TMSC
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-05-20 06:57:30 +00:00
parent b84fe4e5c7
commit 6cc3fd330c
1 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx
+37 -38
View File
@@ -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>