fix: Tab transition animations

src/lib/components/Dialog/Dialog.svelte

@@ -3,6 +3,7 @@
 	import classNames from 'classnames';
 	import { fade } from 'svelte/transition';
 	import { modalStack } from '../Modal/modal.store';
+	import Panel from '../Panel.svelte';
 
 	export let size: 'sm' | 'full' | 'lg' | 'dynamic' = 'sm';
 
@@ -16,20 +17,12 @@
 		class="h-full flex items-center justify-center bg-primary-900/75 py-20 px-32"
 		transition:fade={{ duration: 100 }}
 		on:click|self={() => handleClose()}
+		on:keypress={() => {
+			/* For a11y*/
+		}}
 	>
-		<div
-			class={classNames(
-				'bg-primary-800 rounded-2xl p-12 relative shadow-xl flex flex-col transition-[max-width]',
-				{
-					'flex-1 max-w-lg min-h-0 overflow-y-auto scrollbar-hide': size === 'sm',
-					'flex-1 h-full overflow-hidden': size === 'full',
-					'flex-1 max-w-[56rem] min-h-0 overflow-y-auto scrollbar-hide': size === 'lg',
-					'': size === 'dynamic'
-				},
-				$$restProps.class
-			)}
-		>
+		<Panel {size} class={$$restProps.class}>
 			<slot close={handleClose} />
-		</div>
+		</Panel>
 	</div>
 </Modal>

src/lib/components/Dialog/EditProfileModal.svelte

@@ -103,8 +103,8 @@
 	}
 </script>
 
-<Dialog class="grid" size={$tab === Tabs.EditProfile ? 'sm' : 'dynamic'}>
-	<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4">
+<Dialog class="grid" size={'dynamic'}>
+	<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4 max-w-lg">
 		<h1 class="header2">Edit Profile</h1>
 		<TextField bind:value={name}>name</TextField>
 		<SelectField value={profilePictureTitle} on:clickOrSelect={() => tab.set(Tabs.ProfilePictures)}>
@@ -151,7 +151,7 @@
 		}}
 	>
 		<h1 class="header2 mb-6">Select Profile Picture</h1>
-		<Container direction="grid" gridCols={3} class="grid grid-cols-3 gap-4">
+		<Container direction="grid" gridCols={3} class="grid grid-cols-3 gap-4 w-max">
 			<ProfileIcon
 				url={profilePictures.ana}
 				on:clickOrSelect={() => setProfilePicture(profilePictures.ana)}