fix: #907 sidebar broken in playground (#1066)

Co-authored-by: Cody's Dad <40604284+AceTheCreator@users.noreply.github.com>%0ACo-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>%0ACo-authored-by: acethecreator <devaze007@gmail.com>

Author: surajTade

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">

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;