[@mantine/core] Make header height of Modal and Drawer consistent to …

…prevent layout shift when `withCloseButton` prop is changed
mantinedev · Dec 8, 2023 · 8264ea6 · 8264ea6
1 parent 7868e47
commit 8264ea6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/packages/@mantine/core/src/components/Modal/Modal.story.tsx b/packages/@mantine/core/src/components/Modal/Modal.story.tsx
@@ -36,6 +36,28 @@ export function Usage() {
   );
 }
 
+export function ConsistentHeaderHeight() {
+  const [opened, { open, close }] = useDisclosure(true);
+  const [withCloseButton, handlers] = useDisclosure(true);
+
+  return (
+    <div style={{ padding: 40 }}>
+      <Button onClick={open}>Open modal</Button>
+      {content}
+      <Button onClick={open}>Open modal</Button>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Toggle close button"
+        withCloseButton={withCloseButton}
+        zIndex={73812}
+      >
+        <Button onClick={handlers.toggle}>Toggle close button</Button>
+      </Modal>
+    </div>
+  );
+}
+
 export function WithTabs() {
   const [opened, { open, close }] = useDisclosure(true);
   return (

diff --git a/packages/@mantine/core/src/components/ModalBase/ModalBase.module.css b/packages/@mantine/core/src/components/ModalBase/ModalBase.module.css
@@ -17,6 +17,7 @@
   top: 0;
   background-color: var(--mantine-color-body);
   z-index: 1000;
+  min-height: rem(60px);
 
   @mixin rtl {
     --_pr: var(--mb-padding, var(--mantine-spacing-md));