diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx
index 2cf45b6f..52c74a84 100644
--- a/library/src/containers/Sidebar/Sidebar.tsx
+++ b/library/src/containers/Sidebar/Sidebar.tsx
@@ -119,7 +119,7 @@ export const Sidebar: React.FunctionComponent = () => {
       >
         <div
           className={`${
-            showSidebar ? 'w-full' : ''
+            showSidebar ? 'sidebar--wrapper' : ''
           } block fixed max-h-screen h-full font-sans px-4 pt-8 pb-16 overflow-y-auto bg-gray-200`}
         >
           <div className="sidebar--content">
diff --git a/library/src/styles/default.css b/library/src/styles/default.css
index d8201088..75e8f4ef 100644
--- a/library/src/styles/default.css
+++ b/library/src/styles/default.css
@@ -13,15 +13,20 @@
     @apply lg:relative lg:block lg:w-64 lg:h-auto;
   }
 
+  .container\:xl .sidebar--wrapper{
+    @apply xl:w-full;
+    @apply sm:w-full;
+  }
+
   .container\:base .sidebar--content {
     @apply lg:w-56;
   }
 
-  .container\:xl .sidebar--content {
+  /*.container\:xl .sidebar--content {
     @apply absolute;
     left: 50%;
     transform: translate(-50%, 0);
-  }
+  }*/
 
   .container\:base .panel-item {
     @apply 2xl:flex;