coderefactoring

packages/ui/src/lib/components/Overlay.svelte

@@ -24,11 +24,11 @@
 </script>
 
 <dialog
-	class="dialog-overlay"
-	class:show-modal={open}
-	class:w-[680px]={width === 'default'}
-	class:w-[380px]={width === 'small'}
-	class:w-[860px]={width === 'large'}
+	class="dialog"
+	class:open-modal={open}
+	class:s-default={width == 'default'}
+	class:s-small={width == 'small'}
+	class:s-large={width == 'large'}
 	bind:this={dialog}
 	on:close={close}
 	on:close
@@ -41,10 +41,10 @@
 </dialog>
 
 <style lang="postcss">
-	.dialog-overlay {
-		display: flex;
+	.dialog {
 		flex-direction: column;
 		position: relative;
+		width: 100%;
 		max-height: calc(100vh - 5rem);
 		border-radius: var(--radius-l);
 		background-color: var(--clr-theme-container-light);
@@ -56,7 +56,21 @@
 		}
 	}
 
-	.show-modal {
+	/* modifiers */
+
+	.s-large {
+		max-width: calc(var(--space-64) * 13);
+	}
+
+	.s-default {
+		max-width: calc(var(--space-64) * 10);
+	}
+
+	.s-small {
+		max-width: calc(var(--space-64) * 6);
+	}
+
+	.open-modal {
 		display: flex;
 	}
 </style>

packages/ui/src/routes/[projectId]/board/+page.svelte

@@ -70,7 +70,7 @@
 				/>
 			</div>
 		</div>
-		<Scrollbar {viewport} {contents} thickness="0.4rem" />
+		<Scrollbar {viewport} {contents} horz thickness="0.4rem" />
 	</div>
 </div>