fix: blurry dialogs (#56)

* fix: blurry dialogs * forgot to remove them * 😠 `top-[43%]` took way too long to find 😂 --------- Co-authored-by: Davis SHYAKA <[email protected]>
shyakadavis · Aug 18, 2024 · 77557c0 · 77557c0
1 parent 424bdd5
commit 77557c0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 37 deletions.
diff --git a/src/lib/components/shared/command/command.svelte b/src/lib/components/shared/command/command.svelte
@@ -23,7 +23,7 @@
 {#if $is_desktop}
 	<Command.Dialog
 		bind:open={$command_open_state}
-		class="top-[43%] max-w-[640px] sm:rounded-xl"
+		class="max-w-[640px] sm:rounded-xl"
 		close_button="esc"
 	>
 		<Command.Input

diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Icons } from '$lib/assets/icons/index.js';
 	import { cn, flyAndScale } from '$lib/utils.js';
-	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { builderActions, Dialog as DialogPrimitive, getAttrs } from 'bits-ui';
 	import { Button } from '../button/index.js';
 	import * as Dialog from './index.js';
 
@@ -21,45 +21,53 @@
 	export let hide_close_button: $$Props['hide_close_button'] = false;
 	export let overlay_classes: $$Props['overlay_classes'] = undefined;
 	export let el: $$Props['el'] = undefined;
+
+	$: _transition = transition || flyAndScale;
 </script>
 
 <Dialog.Portal>
 	<Dialog.Overlay class={overlay_classes} />
-	<DialogPrimitive.Content
-		bind:el
-		{transition}
-		{transitionConfig}
-		class={cn(
-			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background-100 p-6 shadow-lg sm:rounded-lg md:w-full',
-			className
-		)}
-		{...$$restProps}
-	>
-		<slot />
-		{#if !hide_close_button}
-			<DialogPrimitive.Close asChild let:builder>
-				{#if close_button === 'esc'}
-					<Button
-						builders={[builder]}
-						size="sm"
-						variant="secondary"
-						class="absolute right-4 top-3 h-5 px-1.5 text-xs "
-					>
-						Esc
-					</Button>
-				{:else if close_button === 'x'}
-					<Button
-						svg_only
-						aria-label="Close"
-						shape="square"
-						size="tiny"
-						variant="secondary"
-						class="absolute right-4 top-3 px-1.5"
-					>
-						<Icons.Cross aria-hidden="true" class="size-5" />
-					</Button>
+	<DialogPrimitive.Content asChild let:builder>
+		<div class="fixed inset-0 z-50 grid place-items-center">
+			<div
+				bind:this={el}
+				transition:_transition={transitionConfig}
+				use:builderActions={{ builders: [builder] }}
+				{...getAttrs([builder])}
+				{...$$restProps}
+				class={cn(
+					'relative grid w-full max-w-lg gap-4 border bg-background-100 p-6 shadow-lg sm:rounded-lg md:w-full',
+					className
+				)}
+				{...$$restProps}
+			>
+				<slot></slot>
+				{#if !hide_close_button}
+					<DialogPrimitive.Close asChild let:builder>
+						{#if close_button === 'esc'}
+							<Button
+								builders={[builder]}
+								size="sm"
+								variant="secondary"
+								class="absolute right-4 top-3 h-5 px-1.5 text-xs "
+							>
+								Esc
+							</Button>
+						{:else if close_button === 'x'}
+							<Button
+								svg_only
+								aria-label="Close"
+								shape="square"
+								size="tiny"
+								variant="secondary"
+								class="absolute right-4 top-3 px-1.5"
+							>
+								<Icons.Cross aria-hidden="true" class="size-5" />
+							</Button>
+						{/if}
+					</DialogPrimitive.Close>
 				{/if}
-			</DialogPrimitive.Close>
-		{/if}
+			</div>
+		</div>
 	</DialogPrimitive.Content>
 </Dialog.Portal>