From 3bb75aa761d89f6f6e6c291bf6c2eb576a3dcaa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 18 Dec 2023 11:09:06 +0100
Subject: [PATCH] pkp/pkp-lib#9527 Adjust size for modal to be screenshoted

---
 .storybook/modes.js                     |  1 +
 src/components/Modal/Modal.stories.js   | 14 +++++---------
 src/components/Modal/Modal.stories.less |  3 ---
 3 files changed, 6 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/Modal/Modal.stories.less

diff --git a/.storybook/modes.js b/.storybook/modes.js
index 7b3430c26..a23a5b216 100644
--- a/.storybook/modes.js
+++ b/.storybook/modes.js
@@ -2,6 +2,7 @@ export const allModes = {
 	desktop: {
 		viewport: 'large',
 	},
+	// for snapshotting scrollable areas with all content, like modals
 	desktopLargeHeight: {
 		viewport: 'largeHeight',
 	},
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index 78a5de6fb..83a31096f 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -6,7 +6,6 @@ import FormMock from '@/docs/components/Form/helpers/form-announcement';
 import List from '@/components/List/List.vue';
 import ListItem from '@/components/List/ListItem.vue';
 import {allModes} from '../../../.storybook/modes.js';
-//import './Modal.stories.less';
 
 export default {
 	title: 'Components/Modal',
@@ -37,8 +36,7 @@ export const Base = {
 	}),
 	decorators: [
 		() => ({
-			template:
-				'<div style="height: 150px;background-color:red"><story/></div>',
+			template: '<div style="height: 150px"><story/></div>',
 		}),
 	],
 
@@ -75,13 +73,13 @@ export const WithForm = {
 	}),
 	decorators: [
 		() => ({
-			template:
-				'<div style="height: 1500px;background-color:red"><story/></div>',
+			template: '<div style="height: 1500px"><story/></div>',
 		}),
 	],
 	parameters: {
 		chromatic: {
 			modes: {
+				desktop: {disable: true},
 				desktopLargeHeight: allModes['desktopLargeHeight'],
 			},
 		},
@@ -139,8 +137,7 @@ export const WithTabs = {
 	}),
 	decorators: [
 		() => ({
-			template:
-				'<div style="height: 500px;background-color:red"><story/></div>',
+			template: '<div style="height: 500px"><story/></div>',
 		}),
 	],
 
@@ -212,8 +209,7 @@ export const WithActions = {
 	}),
 	decorators: [
 		() => ({
-			template:
-				'<div style="height: 300px;background-color:red"><story/></div>',
+			template: '<div style="height: 300px"><story/></div>',
 		}),
 	],
 
diff --git a/src/components/Modal/Modal.stories.less b/src/components/Modal/Modal.stories.less
deleted file mode 100644
index 862115e0d..000000000
--- a/src/components/Modal/Modal.stories.less
+++ /dev/null
@@ -1,3 +0,0 @@
-div[role='dialog'] .overflow-y-auto {
-	overflow-y: initial;
-}