[@mantine/core] Modal: Fix incorrect scrollbar offset on Windows/Linux (

#1721)
mantinedev · Aug 14, 2022 · cfefc93 · cfefc93
1 parent 73c0e3a
commit cfefc93
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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) => (
+    <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>
+  ));
+
 function WrappedModal(
   props: Omit<React.ComponentPropsWithoutRef<typeof Modal>, 'opened' | 'onClose'>
 ) {
@@ -81,4 +91,9 @@ storiesOf('Modal', module)
       <WrappedModal title="Modal with default radius">default radius</WrappedModal>
     </MantineProvider>
   ))
-  .add('Fullscreen', () => <WrappedModal fullScreen>Full screen modal</WrappedModal>);
+  .add('Fullscreen', () => (
+    <>
+      <WrappedModal fullScreen>Full screen modal</WrappedModal>
+      {content}
+    </>
+  ));
diff --git 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),
     },