Storybook: Viewport Addon: Border-box modifies iframe size

[jcousins-ynap]

The border of #storybook-preview-iframe reduces the width and height of the document by 20px thanks to * { box-sizing: border-box; }.

This means that a viewport is not the size it says it is.

With the following viewport defined:

viewports: {
  bp1: {
    name: 'Breakpoint 1',
    styles: {
      width: '320px',
      height: '480px',
    },
  }
}

The iFrame document should be 320px by 460px, but instead it actually is 300px by 460px.

System:

• OS: MacOS
• Device: Macbook Pro 13" 2017
• Browser: Chrome
• Framework: react
• Addons: @storybook/addon-viewport
• Version: ^5.0.0

[evolutionxbox]

As far as I know, this issue can only be mitigated by editing the addon source.

Using the following css fixes the issue:

#storybook-preview-iframe {
  box-sizing: content-box !important;
}

The use of important is to override any style attributes, but if this rule can be added via emotion, or the like, that is preferable.

[shilman]

Wanna issue a PR?

[evolutionxbox]

Honestly, not really.
However, now that I have much more free time today than I thought I'll give it a go.

[evolutionxbox]

(btw, the account which posted the issue is my work github account)

[shilman]

Yo-ho-ho!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.4 containing PR #5993 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[shilman]

Whoopee!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.2 containing PR #5993 that references this issue. Upgrade today to try it out!