From 4ead01ef5ab6a05015dd329ae58172ebd8647159 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Thu, 11 Nov 2021 19:02:09 +0100
Subject: [PATCH] Fix overlapping content for expandable sidebar

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 packages/core-components/src/layout/Sidebar/Bar.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index 1770289c08..056a5ae38e 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -23,16 +23,10 @@ import { BackstageTheme } from '@backstage/theme';
 import { SidebarPinStateContext } from './Page';
 import { MobileSidebar } from './MobileSidebar';
 
-export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
+export type SidebarClassKey = 'drawer' | 'drawerOpen';
 
 const useStyles = makeStyles<BackstageTheme>(
   theme => ({
-    root: {
-      zIndex: 1000,
-      position: 'relative',
-      overflow: 'visible',
-      width: theme.spacing(7) + 1,
-    },
     drawer: {
       display: 'flex',
       flexFlow: 'column nowrap',
@@ -41,7 +35,7 @@ const useStyles = makeStyles<BackstageTheme>(
       left: 0,
       top: 0,
       bottom: 0,
-      padding: 0,
+      zIndex: 1000,
       background: theme.palette.navigation.background,
       overflowX: 'hidden',
       msOverflowStyle: 'none',