Skip to content

Commit 7696c78

Browse files
committed
fix: remove horizontal scrollbar from story canvas
1 parent de7f36b commit 7696c78

File tree

2 files changed

+20
-3
lines changed

2 files changed

+20
-3
lines changed

packages/component-library/.storybook/preview.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ export const decorators: Decorator[] = [
7676
"data-background": globals.background,
7777
})}
7878
>
79-
<Story />
79+
<div className={styles.storyWrapper}>
80+
<Story />
81+
</div>
8082
</BodyProviders>
8183
)}
8284
</RootProviders>

packages/component-library/.storybook/storybook.module.scss

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ body,
77

88
.contents {
99
height: 100vh;
10-
width: 100vw;
10+
min-width: 100vh;
1111
color: theme.color("foreground");
1212
background: theme.color("background", "primary");
1313
display: grid;
@@ -19,7 +19,6 @@ body,
1919
}
2020

2121
&[data-layout="padded"] {
22-
padding: theme.spacing(10);
2322
display: block;
2423
place-content: unset;
2524
}
@@ -29,3 +28,19 @@ body,
2928
place-content: unset;
3029
}
3130
}
31+
32+
.storyWrapper {
33+
padding: theme.spacing(4);
34+
width: 100%;
35+
max-width: min(100%, 1280px); // xl breakpoint
36+
box-sizing: border-box;
37+
38+
[data-layout="padded"] & {
39+
padding: theme.spacing(10);
40+
}
41+
42+
[data-layout="fullscreen"] & {
43+
padding: 0;
44+
max-width: none;
45+
}
46+
}

0 commit comments

Comments
 (0)