Remove padding from storybook

#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',
};

Top comments (7)

Martin Ratinaud • Sep 7 '23 • 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;