[@mantine/core] Modal: Fix incorrect overflow with fullScreen option (#…

…2118)

src/mantine-core/src/Modal/Modal.story.tsx

@@ -1,25 +1,8 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { storiesOf } from '@storybook/react';
-import { MantineProvider } from '@mantine/styles';
-import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
-import { Select } from '../Select/Select';
-import { Autocomplete } from '../Autocomplete/Autocomplete';
-import { Popover } from '../Popover/Popover';
-import { ColorInput } from '../ColorInput/ColorInput';
-import { Menu } from '../Menu/Menu';
+import React, { useState } from 'react';
 import { Modal } from './Modal';
-import { MultiSelect } from '../MultiSelect/MultiSelect';
+import { Button } from '../Button';
 
-const content = Array(20)
-  .fill(0)
-  .map((_, index) => (
-    <p key={index}>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, eum nihil odit, voluptatem
-      quae quibusdam sint omnis corporis beatae quod sunt magni sequi consequatur rem necessitatibus
-      quia eos! Accusamus, doloribus!
-    </p>
-  ));
+export default { title: 'Modal' };
 
 function WrappedModal(
   props: Omit<React.ComponentPropsWithoutRef<typeof Modal>, 'opened' | 'onClose'>
@@ -34,66 +17,21 @@ function WrappedModal(
   );
 }
 
-storiesOf('Modal', module)
-  .add('Without portal', () => <WrappedModal withinPortal={false}>test</WrappedModal>)
-  .add('Content overflow', () => (
-    <WrappedModal title="This title is so large that there is no space to fit it all on single line and it will wrap on the second one or may be even on the third one">
-      IDecidedToPutSoMuchUnbreakableContentInsideModalSoThatItWillOverflow
-    </WrappedModal>
-  ))
-  .add('Centered with overflow', () => (
-    <WrappedModal title="Authentication form" centered overflow="outside">
-      {Array(100)
-        .fill('REACT IS NOT A FRAMEWORK')
-        .map((c) => (
-          <Text weight={700}>{c}</Text>
-        ))}
-    </WrappedModal>
-  ))
-  .add('With popover components', () => (
-    <WrappedModal title="Modal with overlay items">
-      <Select data={['react', 'ng']} placeholder="Select" />
-      <Autocomplete data={['react', 'ng']} mt="md" placeholder="Autocomplete" />
-      <MultiSelect data={['react', 'ng']} mt="md" mb="md" placeholder="MultiSelect" />
-      <Popover position="bottom" withArrow>
-        <Popover.Target>
-          <Button>Toggle popover</Button>
-        </Popover.Target>
-        <Popover.Dropdown>
-          <Text size="sm">Thanks for stopping by and checking Mantine, you are awesome!</Text>
-        </Popover.Dropdown>
-      </Popover>
-      <ColorInput mt="md" mb="md" placeholder="Color input" />
-      <Menu>
-        <Menu.Item>Hello</Menu.Item>
-      </Menu>
-    </WrappedModal>
-  ))
-  .add('Custom target', () => {
-    const ref = useRef<HTMLDivElement>();
-    const [mount, setMount] = useState(false);
-    useEffect(() => {
-      setMount(true);
-    }, []);
-    return (
-      <>
-        <div ref={ref}>target</div>
-        {mount && (
-          <WrappedModal title="Modal with overlay items" target="#docs-root">
-            targeted
-          </WrappedModal>
-        )}
-      </>
-    );
-  })
-  .add('Default radius on MantineProvider', () => (
-    <MantineProvider theme={{ defaultRadius: 0 }} inherit>
-      <WrappedModal title="Modal with default radius">default radius</WrappedModal>
-    </MantineProvider>
-  ))
-  .add('Fullscreen', () => (
-    <>
-      <WrappedModal fullScreen>Full screen modal</WrappedModal>
-      {content}
-    </>
+const content = Array(40)
+  .fill(0)
+  .map((_, index) => (
+    <p key={index}>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nesciunt architecto
+      beatae iure, aliquam laborum molestias ratione delectus sed cupiditate, nobis impedit eos vero
+      neque magni minima repellendus! Beatae, illo.
+    </p>
   ));
+
+export function FullScreenWithOverflow() {
+  return (
+    <div style={{ padding: 40 }}>
+      <WrappedModal fullScreen>{content}</WrappedModal>
+      {content}
+    </div>
+  );
+}

src/mantine-core/src/Modal/Modal.styles.ts

@@ -27,6 +27,8 @@ function getFullScreenStyles(fullScreen: boolean): CSSObject {
     left: 0,
     right: 0,
     bottom: 0,
+    maxHeight: '100vh',
+    overflowY: 'auto',
   };
 }