From b7722217aeafd87e4b58b5e077eac3fffe4fbe04 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 17 Jul 2019 13:49:48 +0200
Subject: [PATCH] ADD default minimal viewport as default && FIX scrolling
 issue on viewports larger then main area

ADD migration guide to get old defaults again
---
 MIGRATION.md                    | 15 +++++++++++++++
 addons/viewport/src/Tool.tsx    |  8 ++++++--
 addons/viewport/src/defaults.ts | 27 +++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index e61987b01e96..70b5d7bb56a4 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -64,6 +64,21 @@
 
 ## From version 5.1.x to 5.2.x
 
+### default viewports
+
+The default viewports have been reduced to a smaller set, we think is enough for most usecases.
+You can get the old default back by adding the following to your `config.js`:
+
+```js
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+addParameters({
+  options: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+});
+```
+
 ### Grid toolbar-feature
 
 The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again.
diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx
index 3eab23f9fb58..999ccd40d425 100644
--- a/addons/viewport/src/Tool.tsx
+++ b/addons/viewport/src/Tool.tsx
@@ -8,6 +8,7 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 import { useParameter, useAddonState } from '@storybook/api';
 import { PARAM_KEY, ADDON_ID } from './constants';
+import { MINIMAL_VIEWPORTS } from './defaults';
 import { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
 
 interface ViewportItem {
@@ -122,7 +123,7 @@ export const ViewportTool: FunctionComponent<{}> = React.memo(
     const { viewports, defaultViewport, disable } = useParameter<ViewportAddonParameter>(
       PARAM_KEY,
       {
-        viewports: {},
+        viewports: MINIMAL_VIEWPORTS,
         defaultViewport: responsiveViewport.id,
       }
     );
@@ -195,12 +196,15 @@ export const ViewportTool: FunctionComponent<{}> = React.memo(
                 },
                 [`#${wrapperId}`]: {
                   padding: theme.layoutMargin,
-                  display: 'flex',
                   alignContent: 'center',
                   alignItems: 'center',
                   justifyContent: 'center',
                   justifyItems: 'center',
                   overflow: 'auto',
+
+                  display: 'grid',
+                  gridTemplateColumns: '100%',
+                  gridTemplateRows: '100%',
                 },
               }}
             />
diff --git a/addons/viewport/src/defaults.ts b/addons/viewport/src/defaults.ts
index a6d5f858b86a..8a67ec92d3a4 100644
--- a/addons/viewport/src/defaults.ts
+++ b/addons/viewport/src/defaults.ts
@@ -131,3 +131,30 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
   },
 };
 export const DEFAULT_VIEWPORT = 'responsive';
+
+export const MINIMAL_VIEWPORTS: ViewportMap = {
+  mobile1: {
+    name: 'Small mobile',
+    styles: {
+      height: '568px',
+      width: '320px',
+    },
+    type: 'mobile',
+  },
+  mobile2: {
+    name: 'Large mobile',
+    styles: {
+      height: '896px',
+      width: '414px',
+    },
+    type: 'mobile',
+  },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      height: '1112px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
+};