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:
Replit Agent
2026-07-08 13:46:08 +00:00
parent a9eaf2719f
commit c81487b6ba
+12 -5
View File
@@ -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();
}}
>
{children}
<DialogFooter>
{/* 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}
</div>
<DialogFooter className="shrink-0 pt-3">
<Button type="button" variant="ghost" onClick={onClose}>
{t("common.cancel")}
</Button>