Task #703: تمكين التمرير داخل نافذة الحجز الطويلة
- DialogShell (artifacts/tx-os/src/pages/protocol.tsx) now caps the dialog at max-h-[85vh] with a flex column layout: the title (DialogHeader) and the save/cancel footer stay always visible, while the form fields scroll in an inner overflow-y-auto area (overscroll-contain). - Applies to all DialogShell users (booking, room, gift dialogs); short forms are unaffected since the container only scrolls when content exceeds 85vh. - RTL unaffected (dir attribute preserved). - Verified: tsc clean for tx-os; architect review run. - Architect flagged a potential grid-vs-flex display conflict in DialogContent, but cn() uses tailwind-merge, so the later "flex" class deterministically replaces the base "grid" — no change needed.
This commit is contained in:
@@ -2533,19 +2533,26 @@ function DialogShell({
|
||||
const { i18n, t } = useTranslation();
|
||||
return (
|
||||
<Dialog open onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent dir={i18n.language === "ar" ? "rtl" : "ltr"}>
|
||||
<DialogHeader>
|
||||
<DialogContent
|
||||
dir={i18n.language === "ar" ? "rtl" : "ltr"}
|
||||
className="flex max-h-[85vh] flex-col overflow-hidden"
|
||||
>
|
||||
<DialogHeader className="shrink-0">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form
|
||||
className="space-y-3"
|
||||
className="flex min-h-0 flex-1 flex-col"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
{/* Long forms (e.g. the booking form) scroll here while the
|
||||
title and the save/cancel buttons stay visible. */}
|
||||
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-1 py-1 -mx-1">
|
||||
{children}
|
||||
<DialogFooter>
|
||||
</div>
|
||||
<DialogFooter className="shrink-0 pt-3">
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user