DEV Community

Tom
Tom

Posted on

Remove padding from storybook

After upgrading from Storybook 5 to Storybook 6 I experienced some annoying padding around all my stories.

The inspector told me this was due to a padding of 1rem defined in the class name sb-show-main on the body element. I searched for how to override this class, but was totally not necessary. The solution was actually quite simple, by adding just the following snippet to .storybook/preview.js:

export const parameters = {
  layout: 'fullscreen',
};
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
martinratinaud profile image
Martin Ratinaud • Edited

You can also use this on a component basis

const meta: Meta<typeof Component> = {
  title: 'CSS/Layouts/Aside Layout',
  component: Component,
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {},
} as Meta;
Enter fullscreen mode Exit fullscreen mode

Thanks for pointing me in the right direction

Collapse
 
neldeles profile image
neldeles

This issue was starting to annoy me. Thank you for sharing this!

Collapse
 
omigtito profile image
Miguel Machado Pacheco

Thank you for sharing this!

Collapse
 
raralang profile image
Conrado Fonseca

Thanks!!!

Collapse
 
jayliu50 profile image
Jay Liu

Wow, this was exactly the problem I wanted to fix. Thank you so much.

Collapse
 
nerfologist profile image
Marco Arduini

Thank you! Super useful.

Collapse
 
jrbentham profile image
Joel Robles Bentham

Thank you!