[@mantine/core] AppShell: Fix incorrect app safe area handling by App…

…Shell.Footer (#6060)
mantinedev · Apr 11, 2024 · 17d1a37 · 17d1a37
1 parent cff6b32
commit 17d1a37
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/@mantine/core/src/components/AppShell/AppShell.module.css b/packages/@mantine/core/src/components/AppShell/AppShell.module.css
@@ -108,8 +108,9 @@
 }
 
 .footer {
-  bottom: env(safe-area-inset-bottom);
-  height: var(--app-shell-footer-height);
+  bottom: 0;
+  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
 

diff --git a/packages/@mantine/core/src/components/AppShell/AppShell.story.tsx b/packages/@mantine/core/src/components/AppShell/AppShell.story.tsx
@@ -6,6 +6,10 @@ import { AppShell } from './AppShell';
 
 export default { title: 'AppShell' };
 
+const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc`;
+
+const longContent = Array(30).fill(lorem).join('\n\n');
+
 export function Usage() {
   const [navbarOpened, { toggle: toggleNavbar }] = useDisclosure(true);
   const [navbarMobileOpened, { toggle: toggleNavbarMobile }] = useDisclosure(false);
@@ -28,7 +32,7 @@ export function Usage() {
         collapsed: { desktop: !asideOpened, mobile: !asideMobileOpened },
       }}
       header={{
-        height: 0,
+        height: 60,
         collapsed: !headerOpened,
       }}
       footer={{
@@ -53,7 +57,7 @@ export function Usage() {
           <Button onClick={toggleAside}>Toggle aside</Button>
           <Button onClick={toggleAsideMobile}>Toggle aside mobile</Button>
         </Group>
-        <p>Other content</p>
+        <p>{longContent}</p>
       </AppShell.Main>
 
       <AppShell.Aside>Aside</AppShell.Aside>