diff --git a/app/globals.css b/app/globals.css index 3f98922..3ffd01f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -437,6 +437,8 @@ a, inset: 0 !important; height: fit-content; margin: auto !important; + width: min(calc(100vw - 1.5rem), var(--dialog-width, 36rem)) !important; + max-width: calc(100vw - 1.5rem) !important; min-width: 0 !important; transform: none !important; translate: 0 0 !important; diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index 5006e56..80c36d2 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -7,6 +7,14 @@ import { Dialog as KumoDialog } from "@cloudflare/kumo/components/dialog"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +const dialogWidthValues = { + sm: "28rem", + md: "36rem", + lg: "42rem", + xl: "48rem", + wide: "64rem", +} as const; + type DialogProps = { open: boolean; title: string; @@ -15,11 +23,16 @@ type DialogProps = { footer?: React.ReactNode; onClose: () => void; className?: string; + width?: keyof typeof dialogWidthValues; }; const kumoBackdropClassNames = "fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0"; +type DialogStyle = React.CSSProperties & { + "--dialog-width": string; +}; + export function Dialog({ open, title, @@ -28,7 +41,14 @@ export function Dialog({ footer, onClose, className, + width = "md", }: DialogProps): React.ReactElement { + const dialogStyle: DialogStyle = { + "--dialog-width": dialogWidthValues[width], + transform: "none", + translate: "0 0", + }; + return ( { @@ -40,13 +60,13 @@ export function Dialog({ >
diff --git a/modules/care/components/CareWorkspaceClient.tsx b/modules/care/components/CareWorkspaceClient.tsx index be1fb57..e53594e 100644 --- a/modules/care/components/CareWorkspaceClient.tsx +++ b/modules/care/components/CareWorkspaceClient.tsx @@ -247,7 +247,7 @@ export function CareWorkspaceClient({ canManage, initialData }: CareWorkspaceCli - +