refac: collection styling

src/lib/components/common/Modal.svelte

@@ -6,11 +6,15 @@
 
 	export let show = true;
 	export let size = 'md';
+	export let className = 'bg-gray-50 dark:bg-gray-900  rounded-2xl';
 
 	let modalElement = null;
 	let mounted = false;
 
 	const sizeToWidth = (size) => {
+		if (size === 'full') {
+			return 'w-full';
+		}
 		if (size === 'xs') {
 			return 'w-[16rem]';
 		} else if (size === 'sm') {
@@ -68,9 +72,9 @@
 		}}
 	>
 		<div
-			class=" m-auto rounded-2xl max-w-full {sizeToWidth(
-				size
-			)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl max-h-[100dvh] overflow-y-auto scrollbar-hidden"
+			class=" m-auto max-w-full {sizeToWidth(size)} {size !== 'full'
+				? 'mx-2'
+				: ''} shadow-3xl max-h-[100dvh] overflow-y-auto scrollbar-hidden {className}"
 			in:flyAndScale
 			on:mousedown={(e) => {
 				e.stopPropagation();