Storybook 8: remove padding around iframe

Here’s a short recipe for removing padding added around elements in Storybook iframes.

The problem

Storybook adds the .sb-main-padded class to the previews. In my opinion, this padding is unnecessary because it is not part of the designed component but a part of the Storybook viewport. It might wrongly suggest that we must deal with unwanted padding, e.g., on mobile devices.

The solution easily found online – for Storybook 6

It’s easy to find a solution for Storybook 6 (another blog post for Storybook 6 here):

// Preview.ts

import type { Parameters } from '@storybook/react';

export const parameters: Parameters = {
  layout: 'fullscreen'
};Code language: TypeScript (typescript)

Solution for Storybook 8

While not hugely different, I’ll share an updated solution for Storybook 8 because you will most likely use it in new web projects 😊 And the official documentation for story layout is here.

// Preview.ts

import type { Preview } from '@storybook/react';

const preview: Preview = {
    parameters: { layout: 'fullscreen' },
};

export default preview;Code language: TypeScript (typescript)

And here’s a mini proof that it solved a problem, and replaces .sb-main-padded with sb-main-fullscreen 🙂

Good luck, and have fun with your design system!