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),
},