[@mantine/core] AppShell: Fix unexpected Header transition when scrollbar becomes hidden via scroll lock (#8420)

* fix: prevent AppShell Header and Footer from bouncing when scrollbar is hidden/unhidden

* animte inset-inline-start, inset-inline-end instead

* prevent jumping header/footer/aside for both default and alt layout

* updated tests

Author: schummar

packages/@mantine/core/src/components/AppShell/AppShell.module.css

@@ -75,6 +75,10 @@
   &:where([data-with-border]) {
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
+
+  :where([data-scroll-locked]) & {
+    visibility: var(--app-shell-aside-scroll-locked-visibility);
+  }
 }
 
 .main {
@@ -90,12 +94,12 @@
 .footer {
   position: fixed;
   inset-inline: 0;
-  transition-property: transform, left, right;
+  transition-property: transform, margin-inline-start, margin-inline-end;
   background-color: var(--mantine-color-body);
 
   :where([data-layout='alt']) & {
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+    margin-inline-end: var(--app-shell-aside-offset, 0rem);
   }
 }
 

packages/@mantine/core/src/components/AppShell/AppShell.story.tsx

@@ -1,6 +1,7 @@
 import { useDisclosure } from '@mantine/hooks';
 import { Button } from '../Button';
 import { Group } from '../Group';
+import { Modal } from '../Modal';
 import { AppShell } from './AppShell';
 
 export default { title: 'AppShell' };
@@ -17,6 +18,7 @@ export function Usage() {
   const [asideMobileOpened, { toggle: toggleAsideMobile }] = useDisclosure(false);
   const [headerOpened, { toggle: toggleHeader }] = useDisclosure(true);
   const [footerOpened, { toggle: toggleFooter }] = useDisclosure(true);
+  const [modalOpened, { toggle: toggleModal }] = useDisclosure(false);
 
   return (
     <AppShell
@@ -46,7 +48,9 @@ export function Usage() {
         <AppShell.Section grow>Grow section</AppShell.Section>
         <AppShell.Section>Last section</AppShell.Section>
       </AppShell.Navbar>
-      <AppShell.Header>Header</AppShell.Header>
+      <AppShell.Header>
+        <Group justify="center">Header</Group>
+      </AppShell.Header>
       <AppShell.Main>
         <Group>
           <Button onClick={toggleHeader}>Toggle header</Button>
@@ -56,8 +60,14 @@ export function Usage() {
 
           <Button onClick={toggleAside}>Toggle aside</Button>
           <Button onClick={toggleAsideMobile}>Toggle aside mobile</Button>
+
+          <Button onClick={toggleModal}>Open modal</Button>
         </Group>
         <p>{longContent}</p>
+
+        <Modal opened={modalOpened} onClose={toggleModal} title="Modal inside AppShell">
+          <p>Dialog Content</p>
+        </Modal>
       </AppShell.Main>
 
       <AppShell.Aside>Aside</AppShell.Aside>
@@ -71,6 +81,8 @@ export function AltLayout() {
   const [opened, { toggle }] = useDisclosure(true);
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(false);
   const [headerOpened, { toggle: toggleHeader }] = useDisclosure(true);
+  const [modalOpened, { toggle: toggleModal }] = useDisclosure(false);
+
   return (
     <AppShell
       padding="md"
@@ -91,17 +103,24 @@ export function AltLayout() {
     >
       <AppShell.Aside>Aside</AppShell.Aside>
       <AppShell.Header>
-        <Group justify="flex-end">
+        <Group justify="space-between">
+          <Button>Left</Button>
+          <Button>Center</Button>
           <Button>Button hidden by the aside</Button>
         </Group>
       </AppShell.Header>
-      <AppShell.Main>
+      <AppShell.Main style={{ height: '200vh' }}>
         <Group>
           <Button onClick={toggleHeader}>Toggle header</Button>
           <Button onClick={toggle}>Toggle navbar</Button>
           <Button onClick={toggleMobile}>Toggle navbar mobile</Button>
+          <Button onClick={toggleModal}>Open modal</Button>
         </Group>
         <p>Other content</p>
+
+        <Modal opened={modalOpened} onClose={toggleModal} title="Modal inside AppShell">
+          <p>Dialog Content</p>
+        </Modal>
       </AppShell.Main>
 
       <AppShell.Footer>Footer</AppShell.Footer>

packages/@mantine/core/src/components/AppShell/AppShell.tsx

@@ -79,7 +79,7 @@ export interface AppShellProps
   /** If set, `Navbar`, `Aside`, `Header` and `Footer` components are hidden */
   disabled?: boolean;
 
-  /** If set, `Header` and `Footer` components include styles to offset scrollbars. Based on `react-remove-scroll`. @default `true` for `layout="default"`, `false` for `layout="alt"` */
+  /** If set, `Header` and `Footer` components include styles to offset scrollbars. Based on `react-remove-scroll`. @default `true` */
   offsetScrollbars?: boolean;
 }
 
@@ -135,7 +135,7 @@ export const AppShell = factory<AppShellFactory>((_props, ref) => {
     disabled,
     aside,
     footer,
-    offsetScrollbars = layout !== 'alt',
+    offsetScrollbars = true,
     mod,
     attributes,
     ...others

packages/@mantine/core/src/components/AppShell/AppShellAside/AppShellAside.tsx

@@ -1,3 +1,5 @@
+import cx from 'clsx';
+import { RemoveScroll } from 'react-remove-scroll';
 import {
   Box,
   BoxProps,
@@ -50,7 +52,12 @@ export const AppShellAside = factory<AppShellAsideFactory>((_props, ref) => {
       component="aside"
       ref={ref}
       mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}
-      {...ctx.getStyles('aside', { className, classNames, styles, style })}
+      {...ctx.getStyles('aside', {
+        className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
+        classNames,
+        styles,
+        style,
+      })}
       {...others}
       __vars={{ '--app-shell-aside-z-index': `calc(${zIndex ?? ctx.zIndex} + 1)` }}
     />

packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.test.ts

@@ -58,6 +58,7 @@ describe('@mantine/core/AppShell/assign-aside-variables', () => {
           '--app-shell-aside-width': '100%',
           '--app-shell-aside-transform-rtl': 'translateX(calc(var(--app-shell-aside-width) * -1))',
           '--app-shell-aside-transform': 'translateX(var(--app-shell-aside-width))',
+          '--app-shell-aside-scroll-locked-visibility': 'hidden',
         },
       });
     });
@@ -93,6 +94,7 @@ describe('@mantine/core/AppShell/assign-aside-variables', () => {
           '--app-shell-aside-offset': '0px !important',
           '--app-shell-aside-transform-rtl': 'translateX(calc(var(--app-shell-aside-width) * -1))',
           '--app-shell-aside-transform': 'translateX(var(--app-shell-aside-width))',
+          '--app-shell-aside-scroll-locked-visibility': 'hidden',
         },
       });
     });

packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts

@@ -57,6 +57,7 @@ export function assignAsideVariables({
     minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;
     minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;
     minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';
+    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';
   }
 
   if (aside?.collapsed?.mobile) {
@@ -66,5 +67,6 @@ export function assignAsideVariables({
     maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';
     maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;
     maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;
+    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';
   }
 }