Storybook: Remove margin in FullScreen for large components (100vh space)

[MykolaGolubyev]

Hello,
Do you think margin around a component can be removed in full screen mode?
Use case: testing {height: 100vh} components.

If this idea sounds good, I will try to look into it.

[kohlmannj]

@MykolaGolubyev In my own project, I've added some basic body styles to preview-head.html to work around this:

<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
</style>

The bigger question, of course, is if something like this should be the default for the preview iframe.

[danielduan]

We have any reset.css sort of thing implemented for the Storybook iframe so the margin is probably your browser's default style getting rendered.

I don't think we should be overriding default browser behavior because that's helpful for catching browser specific bugs/behaviors. If you'd like to change your specific usage, @kohlmannj's solution is the best way to go.

[ndelangen]

I agree with @danielduan, this is exactly why the preview-head.html option is there.

Another option would be to expand the addon-viewport with some additional functionality:
setting padding/margin and possible also centering...

[joseneto-fixeads]

The storybook iframe (#storybook-preview-iframe) has a default margin (the chrome puts 8px margin on iframe). Components with 100vh broken, with a scrollbar :(

[Hypnosphi]

@joseneto-fixeads did you try to add preview-head.html file? https://storybook.js.org/configurations/add-custom-head-tags/

[joseneto-fixeads]

@Hypnosphi , Thanks! this solved the problem. I read already about this file, but I don't find him. I don't know the file must be created. Thanks!!!!

[jackblackCH]

How about a decorator for stories? myStory.addDecorator(withBorderless);

[jackblackCH]

A simple and still customizable plugin like solution via a decorator. We inject a style tag that overrides the body class in the iframe.

1. Add file to .storybook/addons/no-border.js -> export default story => <style>.sb-show-main{margin: 0}</style>${story()}

2. In the story

import { storiesOf } from '@storybook/html'; // or react
import noBorder from '<path_back_to_root>.storybook/addons/no-border';

storiesOf('MyStory', module)
  .addDecorator(noBorder)
...

[Obiwarn]

Does not seem to work in SB 6 anymore?

[shilman]

try layout: 'fullscreen' story parameter

[inodino]

@Obiwarn Doesn't work for me either with SB 6..

[chidioguejiofor]

The issue is that there seem to be inline styles in the storybook by default. Not sure how to remove these

[Obiwarn]

find the solution here:

https://github.com/storybookjs/storybook/issues/12109

[chidioguejiofor]

Thanks a lot, @Obiwarn . Solves the problem well.

[mrajewski]

try layout: 'fullscreen' story parameter

work like a charm