diff --git a/src/mantine-core/src/Modal/Modal.story.tsx b/src/mantine-core/src/Modal/Modal.story.tsx index 420793bcf8d..fe57c466d1c 100644 --- a/src/mantine-core/src/Modal/Modal.story.tsx +++ b/src/mantine-core/src/Modal/Modal.story.tsx @@ -11,6 +11,16 @@ import { Menu } from '../Menu/Menu'; import { Modal } from './Modal'; import { MultiSelect } from '../MultiSelect/MultiSelect'; +const content = Array(20) + .fill(0) + .map((_, 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! +

+ )); + function WrappedModal( props: Omit, 'opened' | 'onClose'> ) { @@ -81,4 +91,9 @@ storiesOf('Modal', module) default radius )) - .add('Fullscreen', () => Full screen modal); + .add('Fullscreen', () => ( + <> + Full screen modal + {content} + + )); diff --git a/src/mantine-core/src/Modal/Modal.styles.ts b/src/mantine-core/src/Modal/Modal.styles.ts index 6fc907b035b..b7638e26283 100644 --- a/src/mantine-core/src/Modal/Modal.styles.ts +++ b/src/mantine-core/src/Modal/Modal.styles.ts @@ -76,7 +76,7 @@ export default createStyles( marginTop: centered ? 'auto' : undefined, marginBottom: centered ? 'auto' : undefined, zIndex: 1, - marginLeft: 'calc(var(--removed-scroll-width, 0px) * -1)', + marginLeft: fullScreen ? undefined : 'calc(var(--removed-scroll-width, 0px) * -1)', ...getFullScreenStyles(fullScreen), },