Storybook: Viewport styling changes

[Glazy]

Is your feature request related to a problem? Please describe.

Since upgrading to v5, the viewport addon adds a big 10px black border around your viewport and it doesn't look as nice as it used to.

Describe the solution you'd like

I think it would be good to get a way to configure this border or ideally have a way to return to the styling of V4. Putting the viewport in the center of the screen and adding the shadow around it just made more sense to me.

Describe alternatives you've considered

I could write some CSS to manually override the viewport styles but I would imagine there are a few people out there who would like the option to return to the previous styling/functionality so a configuration option would make more sense.

Are you able to assist bring the feature to reality?

Yes

Additional context

V5

V4

[shilman]

Not sure who changed the border or why. @domyen @ndelangen any comments here? Is that in scope for theming in the near future?

[domyen]

I didn't change the border. The v4 appearance is more handsome imo. Would be open to changing the base UI to something like that if @Glazy wants to open a PR for it.

Something like:

• 1px border
• Box-shadow
• horizontally centered

[shilman]

Zoinks!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.3 containing PR #5979 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]

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

[connor-baer]

There seems to have been a regression in #7385 (see this line). I've submitted a PR to fix it again.

[sioanis]

Not sure why, but this still seems to exist for "@storybook/vue": "^5.3.14", "@storybook/addon-viewport": "^5.3.14".

[connor-baer]

@sioanis The PR to update the styling was merged into the v6 branch (https://github.com/storybookjs/storybook/pull/8486)

[sioanis]

Ah, I see. Thank you, @connor-baer.