[fix](@svelteui/core): fix resize issue on Modal for smaller viewports

ISSUES CLOSED: #419
svelteuidev · Jul 18, 2023 · 0770e2b · 0770e2b
1 parent 2357938
commit 0770e2b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 18 deletions.
diff --git a/apps/docs/src/lib/data/main/homepage.js b/apps/docs/src/lib/data/main/homepage.js
@@ -276,11 +276,11 @@ export const components = [
 		component: Mark,
 		link: 'core/mark',
 		title: 'Mark',
-    color: '$blue600',
+		color: '$blue600',
 		content: 'Enter some text'
-  },
-  {
-    icon: BoxIcon,
+	},
+	{
+		icon: BoxIcon,
 		component: Blockquote,
 		link: 'core/blockquote',
 		title: 'Blockquote',

diff --git a/packages/svelteui-core/src/components/Modal/Modal.stories.svelte b/packages/svelteui-core/src/components/Modal/Modal.stories.svelte
@@ -12,6 +12,10 @@
 	function handleClose() {
 		opened = false;
 	}
+
+	const content = Array(100)
+		.fill(0)
+		.map((_, index) => 'Svelte is a complier');
 </script>
 
 <Meta title="Components/Modal" component={Modal} />
@@ -32,3 +36,12 @@
 </Template>
 
 <Story name="Modal" id="modalStory" />
+
+<Story name="With Overflow" id="modalOverflowStory">
+	<Button on:click={toggleOpen}>Click Me</Button>
+	<Modal {opened} on:close={handleClose} overflow="inside">
+		{#each content as _}
+			<p>{_}</p>
+		{/each}
+	</Modal>
+</Story>
diff --git a/packages/svelteui-core/src/components/Modal/Modal.styles.ts b/packages/svelteui-core/src/components/Modal/Modal.styles.ts
@@ -44,6 +44,13 @@ export default createStyles((theme, { centered, overflow, size, zIndex }: ModalS
 			alignItems: centered ? 'center' : 'flex-start'
 		},
 
+		transition: {
+			display: 'flex',
+			justifyContent: 'center',
+			width: '100%',
+			maxWidth: '100%'
+		},
+
 		title: {
 			marginRight: +theme.space.md.value,
 			textOverflow: 'ellipsis',
@@ -61,8 +68,7 @@ export default createStyles((theme, { centered, overflow, size, zIndex }: ModalS
 			backgroundColor: 'white',
 			marginTop: centered ? 'auto' : undefined,
 			marginBottom: centered ? 'auto' : undefined,
-			zIndex: 1,
-			marginLeft: 'calc(var(--removed-scroll-width, 0px) * -1)'
+			zIndex: 1
 		},
 
 		header: {

diff --git a/packages/svelteui-core/src/components/Modal/Modal.svelte b/packages/svelteui-core/src/components/Modal/Modal.svelte
@@ -109,7 +109,7 @@
 					shouldTrigger && event.code === 'Escape' && closeOnEscape && onClose();
 				}}
 			>
-				<div transition:scale={{ duration: 100, easing: sineInOut }}>
+				<div class={classes.transition} transition:scale={{ duration: 100, easing: sineInOut }}>
 					<Paper
 						class={classes.modal}
 						{shadow}
@@ -143,17 +143,17 @@
 						</div>
 					</Paper>
 				</div>
-				<div transition:fade={{ duration: 200, easing: sineInOut }}>
-					<Overlay
-						class={classes.overlay}
-						override={{ position: 'fixed' }}
-						zIndex={0}
-						on:mousedown={() => closeOnClickOutside && onClose()}
-						blur={overlayBlur}
-						color={overlayColor || 'black'}
-						opacity={_overlayOpacity}
-					/>
-				</div>
+			</div>
+			<div transition:fade={{ duration: 200, easing: sineInOut }}>
+				<Overlay
+					class={classes.overlay}
+					override={{ position: 'fixed' }}
+					zIndex={0}
+					on:mousedown={() => closeOnClickOutside && onClose()}
+					blur={overlayBlur}
+					color={overlayColor || 'black'}
+					opacity={_overlayOpacity}
+				/>
 			</div>
 		</Box>
 	</OptionalPortal>