[@mantine/core] AppShell: Fix wrong padding

mantinedev · May 22, 2023 · 847b658 · 847b658
1 parent b2d7a18
commit 847b658
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/src/mantine-core/src/AppShell/AppShell.styles.ts b/src/mantine-core/src/AppShell/AppShell.styles.ts
@@ -30,20 +30,33 @@ function getPositionStyles(props: AppShellStylesParams, theme: MantineTheme): CS
     return { padding };
   }
 
-  return {
-    minHeight: '100vh',
-    paddingTop: `calc(var(--mantine-header-height, 0px) + ${padding})`,
-    paddingBottom: `calc(var(--mantine-footer-height, 0px) + ${padding})`,
-    paddingLeft: `calc(var(--mantine-navbar-width, 0px) + ${padding})`,
-    paddingRight: `calc(var(--mantine-aside-width, 0px) + ${padding})`,
+  const navbarBreakpointValue = getBreakpointValue(navbarOffset);
+  const asideBreakpointValue = getBreakpointValue(asideOffset);
 
-    [`@media (max-width: ${em(getBreakpointValue(navbarOffset) - 1)})`]: {
-      paddingLeft: padding,
+  return {
+    ...{
+      minHeight: '100vh',
+      paddingTop: `calc(var(--mantine-header-height, 0px) + ${padding})`,
+      paddingBottom: `calc(var(--mantine-footer-height, 0px) + ${padding})`,
+      paddingLeft: `calc(var(--mantine-navbar-width, 0px) + ${padding})`,
+      paddingRight: `calc(var(--mantine-aside-width, 0px) + ${padding})`,
     },
+    ...(navbarBreakpointValue === asideBreakpointValue
+      ? {
+          [`@media (max-width: ${em(navbarBreakpointValue - 1)})`]: {
+            paddingLeft: padding,
+            paddingRight: padding,
+          },
+        }
+      : {
+          [`@media (max-width: ${em(navbarBreakpointValue - 1)})`]: {
+            paddingLeft: padding,
+          },
 
-    [`@media (max-width: ${em(getBreakpointValue(asideOffset) - 1)})`]: {
-      paddingRight: padding,
-    },
+          [`@media (max-width: ${em(asideBreakpointValue - 1)})`]: {
+            paddingRight: padding,
+          },
+        }),
   };
 }