Fix #7167 addon-centered causes component to disappear when zooming

[8beeeaaat]

Issue: close #7167

What I did

I resolve the issue #7167 with styling.
The issue is due to the fact that the width and height of the body element are not fit to the iframe.
So I set the style for the body element in iframe.

Before	After

How to test

• Is this testable with Jest or Chromatic screenshots?
  No.
• Does this need a new example in the kitchen sink apps?
  No.
• Does this need an update to the documentation?
  No.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-8beeeaaat-7167-zooming-with-addon-centered.storybook.now.sh

[ndom91]

@8beeeaaat Looks good! Now someone on the project can check it out and approve/deny it! 😄

[8beeeaaat]

@ndom91
Thank you very much for guiding me!!

[CodeByAlex]

Tested it locally and it LGTM! Nice work:)

[8beeeaaat]

@CodeByAlex
Thank you for your reviewing!!🙌

[CodeByAlex]

Thank you for contributing! Worked like a charm👌

[aarfing]

This change makes the iframe-window too wide as the body has default margin which gets added outside of the 'width: 100%'. So it becomes [margin + 100% + margin] and components which are 100% wide themselves will overflow the iframe.

[CodeByAlex]

Ah bummer, hadn’t seen that scenario. @aarfing, do you know of a better solution?

[aarfing]

@CodeByAlex I guess you could set the body margin explicitly to something like 8px and then do width: calc(100% - 16px)

[CodeByAlex]

@aarfing do you want to give that a try and put out a PR if it works better? If you do, I can review it

[ndom91]

This change makes the iframe-window too wide as the body has default margin which gets added outside of the 'width: 100%'. So it becomes [margin + 100% + margin] and components which are 100% wide themselves will overflow the iframe.

I just tried this myself, and couldn't see any of my full width components overflowing the frame. With or without the sidebar(s).

Are you sure about this? My body and html seem to have margin of 0, see screenshot:

[aarfing]

@ndom91 @CodeByAlex Looks like you have some resetting CSS, I don't have. This is what I get in 5.2.0-beta.9 having a component that doesn't have its width set, but is just display:block.

[ndom91]

@aarfing hmm yeah, so theres this large inline css block at the bottom of the page which resets padding, margin, etc. on a whole bunch of elements:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
...

Im using storybook v5.1.9 btw

[aarfing]

@ndom91 I don't think that inline CSS block is part of a clean Storybook, but I might be wrong - this is my first Storybook-project. Anyway, the 'error' was introduced in 5.2.0-beta.6, so you wouldn't be affected by it in 5.1.9.

[ndom91]

@aarfing okay so I pulled a fresh version and your right. The calc(100% - 16px) fix also works well, but only for the initial zoom value of 0. Each zoom step changes the width of these two elements (html and body), so that zoom + 1 would then need to be calc(75% - 16px), and zoom - 1 would be calc(125% - 16px), etc.

Pull request made: #7640