bug: Blurry command dialog

[ablesea]

Right now when you open the command dialog it is blurry for whatever reason.

Just had to deal with this in my own app right now.

The solution lives here: https://github.com/huntabyte/shadcn-svelte/issues/534#issuecomment-2106351923

I'll open a PR later when I have time if not anyone else is welcome to pick it up.

[shyakadavis]

Thanks for reporting.

I've seen this come up a few times, but never experiencing it myself.

Mind sharing a screenshot? Curious to see what it looks like.

[ablesea]

Just kinda makes you think you are on drugs or something

[shyakadavis]

Thanks.

Now, I'm guessing the issue is in Safari, right?

Here is the thing; I tested on my laptop, and no issue. But when I plug into a monitor, I can confirm the issue. After applying the linked fix, however, the issue persisted. 🙁 See: https://github.com/shyakadavis/geist/tree/patch

Keep in mind that I can only confirm the blurriness on a monitor and on Safari.

[ablesea]

Hm not sure. I see no issue on my laptop monitor but I have been using another monitor plugged into my laptop and I see it there.

I can't speak for safari though it looks fine on my phone but I don't have a mac to test it there. It is some weird resolution scaling thing which would make sense on a different monitor.

This fix did work for my command implementation (which is pretty much copy pasta from this) in my application though (still not sure about safari).

[ablesea]

Here is the implementation:

<script lang="ts">
    import { Dialog as DialogPrimitive, builderActions, getAttrs } from 'bits-ui';
    import * as Dialog from '.';
    import { cn, flyAndScale } from '$lib/utils';
    import { X } from 'lucide-svelte';

    type $$Props = DialogPrimitive.ContentProps;

    let className: $$Props['class'] = undefined;
    export let transition: $$Props['transition'] = flyAndScale;
    export let transitionConfig: $$Props['transitionConfig'] = {
        duration: 200,
    };
    export { className as class };

    $: _transition = transition || flyAndScale;
</script>

<Dialog.Portal>
    <Dialog.Overlay />

    <DialogPrimitive.Content asChild let:builder>
        <div class="fixed inset-0 z-50 grid place-items-center">
            <div
                transition:_transition={transitionConfig}
                use:builderActions={{ builders: [builder] }}
                {...getAttrs([builder])}
                {...$$restProps}
                class={cn(
                    'relative grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
                    className
                )}
            >
                <slot />

                <DialogPrimitive.Close
                    class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
                >
                    <X class="h-4 w-4" />
                    <span class="sr-only">Close</span>
                </DialogPrimitive.Close>
            </div>
        </div>
    </DialogPrimitive.Content>
</Dialog.Portal>

It is basically the same but I did have to fix the thing with the x showing up based on the viewport and not the dialog.

[shyakadavis]

After the preview is live on #56, kindly help me confirm if it's fixed on your end.