From f807f38d1d832838d52be439f1764dbd877aca8c Mon Sep 17 00:00:00 2001
From: hannah-saurusrex <hrose.mcmahon@gmail.com>
Date: Sat, 5 Oct 2019 17:18:18 -0600
Subject: [PATCH 1/2] added workaround code to manager-head.html to adjust
 bottom bar overlapping stories list on mobile

---
 examples/official-storybook/manager-head.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/examples/official-storybook/manager-head.html b/examples/official-storybook/manager-head.html
index 7d058f58633b..4cce129ebb58 100644
--- a/examples/official-storybook/manager-head.html
+++ b/examples/official-storybook/manager-head.html
@@ -2,4 +2,10 @@
   #manager-head-not-loaded {
     display: none;
   }
+  
+  @media (hover: none) {
+    div > div > div > ul {
+      padding-bottom: 80px !important;
+    }
+  }
 </style>

From 75a57a284e4f9d24ad23de9f638b010b122fcb9f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sat, 21 Dec 2019 13:47:36 +0100
Subject: [PATCH 2/2] IMPROVE the fix for sidebar overlapping bottombar

---
 examples/official-storybook/manager-head.html | 6 ------
 lib/ui/src/components/sidebar/Sidebar.tsx     | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/examples/official-storybook/manager-head.html b/examples/official-storybook/manager-head.html
index 4cce129ebb58..7d058f58633b 100644
--- a/examples/official-storybook/manager-head.html
+++ b/examples/official-storybook/manager-head.html
@@ -2,10 +2,4 @@
   #manager-head-not-loaded {
     display: none;
   }
-  
-  @media (hover: none) {
-    div > div > div > ul {
-      padding-bottom: 80px !important;
-    }
-  }
 </style>
diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
index 071cf207f016..22fb6e19b938 100644
--- a/lib/ui/src/components/sidebar/Sidebar.tsx
+++ b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -13,7 +13,7 @@ const Heading = styled(SidebarHeading)<SidebarHeadingProps>({
 
 const Stories = styled(({ className, ...rest }) => (
   <SidebarStories className={className} {...rest} />
-))(({ loading }) => (loading ? { marginTop: 8 } : {}));
+))(({ loading }) => (loading ? { marginTop: 8, overflow: 'hidden' } : { overflow: 'hidden' }));
 
 const Container = styled.nav({
   position: 'absolute',