From eaf8248084dd02a8ba49c39c469df97a255a1229 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 27 Dec 2023 16:41:30 +0100
Subject: [PATCH] :construction: [#584] Keep more viewports in storybook

---
 .storybook/modes.js   |  8 --------
 .storybook/preview.js | 13 ++++++++-----
 2 files changed, 8 insertions(+), 13 deletions(-)
 delete mode 100644 .storybook/modes.js

diff --git a/.storybook/modes.js b/.storybook/modes.js
deleted file mode 100644
index b00151a59..000000000
--- a/.storybook/modes.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const allModes = {
-  mobile: {
-    viewport: "small",
-  },
-  desktop: {
-    viewport: "large",
-  }
-};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 21d616f8d..1ed0c387b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -23,7 +23,6 @@ import {
   withClearSubmissionLocalStorage,
 } from './decorators';
 import {reactIntl} from './reactIntl.js';
-import {allModes} from "./modes";
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -56,9 +55,12 @@ export default {
   parameters: {
     actions: {argTypesRegex: '^on[A-Z].*'},
     viewport: {
+      // These are the viewports that are shown in Storybook
       viewports: {
-        small: { name: "Small", styles: { width: "640px", height: "800px" } },
-        large: { name: "Large", styles: { width: "1024px", height: "1000px" } },
+        smallMobile: { name: "Small mobile", styles: { width: "320px", height: "568px" } },
+        largeMobile: { name: "Large mobile", styles: { width: "414px", height: "896px" } },
+        tablet: { name: "Tablet", styles: { width: "834px", height: "1112px" } },
+        desktop: { name: "Desktop", styles: { width: "1024px", height: "1000px" } },
       },
     },
     controls: {
@@ -93,9 +95,10 @@ export default {
       },
     },
     chromatic: {
+      // Here we specify the viewports of which we want snapshots in Chromatic
       modes: {
-        mobile: allModes.mobile,
-        desktop: allModes.desktop
+        mobile: {viewport: "smallMobile"},
+        desktop: {viewport: "desktop"}
       }
     }
   },