From 873cb06be2e6016e60970aedd36a22ba4f8288bb Mon Sep 17 00:00:00 2001 From: Ian Marlier Date: Tue, 12 Mar 2024 11:34:40 -0400 Subject: [PATCH] Change Dialog theme so that the dialog is scrollable if it overflows the viewport If the Dialog component is `position: fixed` but is taller than the viewport, this means that the bottom of the Dialog (which is below the bottom of the viewport) cannot be reached other than by expanding the window, as the Dialog remains fixed in space relative to the viewport. Changing the position setting to `relative` instead allows the Dialog to be scrolled, without the body moving. A workaround while this PR is being considered it to set the following theme option: ``` ``` The Dialog component is currently using floating-ui to handle blanking out the background of the screen, etc, and sets the `lockScroll` property. `lockScroll` does a number of different things, including hiding the scrollbar on the page and setting `overflow: hidden` on ``. --- .../src/theme/components/dialog/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-tailwind-react/src/theme/components/dialog/index.ts b/packages/material-tailwind-react/src/theme/components/dialog/index.ts index 769e3512b..3cf83d961 100644 --- a/packages/material-tailwind-react/src/theme/components/dialog/index.ts +++ b/packages/material-tailwind-react/src/theme/components/dialog/index.ts @@ -46,7 +46,7 @@ export const dialog: DialogStylesType = { backdrop: { display: "grid", placeItems: "place-items-center", - position: "fixed", + position: "relative", top: 0, left: 0, width: "w-screen",