Viewport addon not working as expected

[lhguerra]

Describe the bug
After registering the addon it's icon shows up in the storybook window but the behavior is odd. Whenever I try to chose a viewport I end up with the same thing.

To Reproduce
Steps to reproduce the behavior:

1. Install the addon yarn add -D @storybook/addon-viewport
2. Register it in addons.js

import '@storybook/addon-viewport/register';

3. Create a story:

import React from 'react';
import { storiesOf } from '@storybook/react';

import ActionDialog from './index';

storiesOf('ActionDialog', module).add('default', () => (
  <ActionDialog>Dialog Content</ActionDialog>
));

4. Run storybook

Expected behavior
The viewport setting resizes the viewport as shown in the print in the Readme.

Actual behavior
With no breakpoints selected (this is correct)

With any breakpoint selected (in this case, iphone6)

Notice that it changes the size of the viewport (see scrollbar on the right) but not to the expected size.

System:

• OS: Ubuntu 16.04
• Device: Desktop
• Browser: chrome
• Framework: react
• Addons: breakpoint
• Version: 5.0.6

[shilman]

Have you taken a look at our example? Does this work as expected on your machine/browser?

https://storybooks-official.netlify.com/?path=/story/ui-panel--default

[lhguerra]

Yes it does. I cloned the repo and will test the example to see if I find any difference between my setup and what the example does.

[CodeByAlex]

@shilman, I'm definitely seeing an issue similar to this in next. Example can be found here: https://next--storybooks-vue.netlify.com/?path=/story/welcome--welcome

[shilman]

It looks like this is a problem in next but not master. Perhaps it was introduced in #6045

@lucas-carl mind taking a look at this?

[lucas-carl]

@shilman I looked into the next version right after my PR but can't seem to find any bugs.

[ioanlucut]

Having the same issue.

[callmephilip]

Seeing this issue with @next

[mick-feller]

Same here, broken on @next

[shilman]

@lucas-carl Indeed, I checked and the problem got introduced in alpha.15, probably by this PR: #6126

@Armanio mind looking into this?

[Armanio]

I'll check it today. Give me a few hours. 👍

[Armanio]

Guys, I apologize: it's my mistake, I fixed zoom and broke background addon.
I create PR to fix my past mistakes. 🔝

[lhguerra]

Just tested and it is working just fine. Thank you guys :)

[shilman]

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