Chromatic does not support viewports and modes on the same story, re…

…jigged out mobile template snapshots are taken, wip

.gitignore

@@ -7,3 +7,5 @@ storybook-static/
 build-storybook.log
 docs/
 dist/
+.idea
+*.iml

.storybook/main.js

@@ -9,7 +9,7 @@ const config = {
     ],
     addons: [//Storybook addons
     //https://storybook.js.org/addons/
-    "@storybook/addon-themes", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@storybook/addon-mdx-gfm", "@chromatic-com/storybook"],
+    "@storybook/addon-themes", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@chromatic-com/storybook"],
 
     framework: {
         //Build the storybook with html-vite rendered - faster than webpack

.storybook/modes.js

@@ -2,7 +2,7 @@
 
 export const allModes = {
   mobile: {
-    viewport: "small",
+    viewport: "iphone12",
   },
   desktop: {
     viewport: "large",

.storybook/preview.js

@@ -3,6 +3,7 @@ import "../dist/assets/js/qld.bootstrap.min.js";
 import "../dist/assets/css/qld.bootstrap.css";
 import {withThemeByClassName} from '@storybook/addon-themes';
 import {allBackgrounds} from "./modes.js";
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 /** @type { import('@storybook/html-vite').Preview } */
 const preview = {
@@ -29,6 +30,7 @@ const preview = {
                 xlarge: {name: "Extra Large", styles: {width: "1312px", height: "1000px"}},
                 xxlarge: {name: "Extra Extra Large", styles: {width: "1599px", height: "1000px"}},
                 navbreakpoint: {name: "Nave Breakpoint", styles: {width: "992px", height: "800px"}},
+                ...INITIAL_VIEWPORTS
             },
         },
         hideNoControlsWarning: true,

chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:660e3e06af8da379e06be302",
+  "zip": true
+}