From 1cf407119a119cb76651c46b06c144d1d4922f75 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 10:54:13 +0100
Subject: [PATCH] pkp/pkp-lib#9527 Adjust size for modal to be screenshoted

---
 .storybook/modes.js                     |  8 ++++++++
 .storybook/preview.js                   | 15 +++++++++++++++
 src/components/Modal/Modal.stories.js   | 11 ++++++++++-
 src/components/Modal/Modal.stories.less |  3 +++
 src/components/Modal/Modal.vue          |  2 +-
 5 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 .storybook/modes.js
 create mode 100644 src/components/Modal/Modal.stories.less

diff --git a/.storybook/modes.js b/.storybook/modes.js
new file mode 100644
index 000000000..7b3430c26
--- /dev/null
+++ b/.storybook/modes.js
@@ -0,0 +1,8 @@
+export const allModes = {
+	desktop: {
+		viewport: 'large',
+	},
+	desktopLargeHeight: {
+		viewport: 'largeHeight',
+	},
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index b273692d3..321ec769e 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -114,6 +114,21 @@ const preview = {
 					: a.id.localeCompare(b.id, undefined, {numeric: true});
 			},*/
 		},
+		viewport: {
+			viewports: {
+				large: {name: 'Large', styles: {width: '1024px', height: '1000px'}},
+				/** For scrollable scenarios */
+				largeHeight: {
+					name: 'Large',
+					styles: {width: '1024px', height: '1500px'},
+				},
+			},
+		},
+		chromatic: {
+			modes: {
+				desktop: allModes['desktop'],
+			},
+		},
 	},
 };
 
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index b01669d81..78a5de6fb 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -5,6 +5,8 @@ import cloneDeep from 'clone-deep';
 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',
@@ -51,7 +53,7 @@ export const WithForm = {
 
 			const form = ref({
 				...cloneDeep(FormMock),
-				aciton: 'https://httpbin.org',
+				action: 'https://httpbin.org',
 				method: 'GET',
 			});
 
@@ -77,6 +79,13 @@ export const WithForm = {
 				'<div style="height: 1500px;background-color:red"><story/></div>',
 		}),
 	],
+	parameters: {
+		chromatic: {
+			modes: {
+				desktopLargeHeight: allModes['desktopLargeHeight'],
+			},
+		},
+	},
 
 	args: {},
 };
diff --git a/src/components/Modal/Modal.stories.less b/src/components/Modal/Modal.stories.less
new file mode 100644
index 000000000..862115e0d
--- /dev/null
+++ b/src/components/Modal/Modal.stories.less
@@ -0,0 +1,3 @@
+div[role='dialog'] .overflow-y-auto {
+	overflow-y: initial;
+}
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index ee880d0d0..7ca2aea84 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -19,7 +19,7 @@
 					class="bg-gray-500 fixed inset-0 z-10 bg-opacity-75 transition-opacity"
 				/>
 			</TransitionChild>
-			<div class="fixed inset-0 z-20">
+			<div class="fixed inset-0 z-20 overflow-y-auto">
 				<div
 					class="flex min-h-full items-end justify-center p-4 text-center sm:items-start sm:p-0"
 				>