From 882adc942efb62dcd6298704c10027809c3e6843 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Thu, 11 Nov 2021 18:33:08 +0100
Subject: [PATCH] Add padding to SidebarPage to avoid MobileSidebar overlapping
 content

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 packages/core-components/src/layout/Page/Page.tsx    | 2 +-
 packages/core-components/src/layout/Sidebar/Page.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx
index ba3c8bfff7..a0c84bb56a 100644
--- a/packages/core-components/src/layout/Page/Page.tsx
+++ b/packages/core-components/src/layout/Page/Page.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
       "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: 'max-content auto 1fr',
     gridTemplateColumns: 'auto 1fr auto',
-    height: '100vh',
+    height: '100%',
     overflowY: 'auto',
   },
 }));
diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx
index 7c7a38d363..20faec2f30 100644
--- a/packages/core-components/src/layout/Sidebar/Page.tsx
+++ b/packages/core-components/src/layout/Sidebar/Page.tsx
@@ -31,7 +31,6 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
   theme => ({
     root: {
       width: '100%',
-      minHeight: '100%',
       transition: 'padding-left 0.1s ease-out',
       [theme.breakpoints.up('sm')]: {
         paddingLeft: ({ isPinned }) =>
@@ -39,6 +38,9 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
             ? sidebarConfig.drawerWidthOpen
             : sidebarConfig.drawerWidthClosed,
       },
+      [theme.breakpoints.down('xs')]: {
+        paddingBottom: sidebarConfig.mobileSidebarHeight,
+      },
     },
   }),
   { name: 'BackstageSidebarPage' },