Browse Source

fix: remove horizontal scrollbar from story canvas

Aaron Bassett 5 months ago
parent
commit
7696c78ceb

+ 3 - 1
packages/component-library/.storybook/preview.tsx

@@ -76,7 +76,9 @@ export const decorators: Decorator[] = [
               "data-background": globals.background,
             })}
           >
-            <Story />
+            <div className={styles.storyWrapper}>
+              <Story />
+            </div>
           </BodyProviders>
         )}
       </RootProviders>

+ 17 - 2
packages/component-library/.storybook/storybook.module.scss

@@ -7,7 +7,7 @@ body,
 
 .contents {
   height: 100vh;
-  width: 100vw;
+  min-width: 100vh;
   color: theme.color("foreground");
   background: theme.color("background", "primary");
   display: grid;
@@ -19,7 +19,6 @@ body,
   }
 
   &[data-layout="padded"] {
-    padding: theme.spacing(10);
     display: block;
     place-content: unset;
   }
@@ -29,3 +28,19 @@ body,
     place-content: unset;
   }
 }
+
+.storyWrapper {
+  padding: theme.spacing(4);
+  width: 100%;
+  max-width: min(100%, 1280px); // xl breakpoint
+  box-sizing: border-box;
+
+  [data-layout="padded"] & {
+    padding: theme.spacing(10);
+  }
+
+  [data-layout="fullscreen"] & {
+    padding: 0;
+    max-width: none;
+  }
+}