fix: Storybook 7 viewport menu not working

code/addons/viewport/src/Tool.tsx

@@ -106,9 +106,10 @@ const getStyles = (
   styles: Styles,
   isRotated: boolean
 ): ViewportStyles | undefined => {
-  if (!styles || !prevStyles) {
+  if (styles === null) {
     return undefined;
   }
+
   const result = typeof styles === 'function' ? styles(prevStyles) : styles;
   return isRotated ? flip(result) : result;
 };

code/addons/viewport/src/models/Viewport.ts

@@ -1,4 +1,4 @@
-export type Styles = ViewportStyles | ((s: ViewportStyles) => ViewportStyles) | null;
+export type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
 
 export interface Viewport {
   name: string;

code/e2e-tests/addon-viewport.spec.ts

@@ -20,4 +20,24 @@ test.describe('addon-viewport', () => {
     // Check that Button story is still displayed
     await expect(sbPage.previewRoot()).toContainText('Button');
   });
+
+  test('iframe width should be changed when a mobile viewport is selected', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    // Click on viewport button and select small mobile
+    await sbPage.navigateToStory('example/button', 'primary');
+
+    // Measure the original dimensions of previewRoot
+    const originalDimensions = await sbPage.previewRoot().boundingBox();
+    await expect(originalDimensions?.width).toBeDefined();
+
+    await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1');
+
+    // Measure the adjusted dimensions of previewRoot after clicking the mobile item.
+    const adjustedDimensions = await sbPage.previewRoot().boundingBox();
+    await expect(adjustedDimensions?.width).toBeDefined();
+
+    // Compare the two widths
+    await expect(adjustedDimensions?.width).not.toBe(originalDimensions?.width);
+  });
 });