pkp/pkp-lib#9527 Adjust size for modal to be screenshoted

pkp · Dec 18, 2023 · 1cf4071 · 1cf4071
1 parent 0e526a8
commit 1cf4071
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/.storybook/modes.js 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
@@ -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
@@ -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
@@ -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
@@ -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"
 				>