bug(docs): blurred results on search

[oscartorres-10]

Steps To Reproduce

1. Open https://ui.shadcn.com/docs
2. Open search with keyboard shortcut CMD ⌘ + K or clicking on search bar in top right corner

The current behavior

Results appear blurred:

The expected behavior

Results shouldn't be blurred, only the background should.

Devices

• I see the issue in Arc, Brave and Chrome browsers
• I don't see the issue in Firefox

Other considerations

After typing, some results appear correctly, non blurred:

[dan5py]

I don't notice any blur in the command dialog. @oscartorres-10 What browser are you using?

[oscartorres-10]

I don't notice any blur in the command dialog. @oscartorres-10 What browser are you using?

I use Arc browser, and I just checked Brave and Chrome and I see the same issue, but not in Firefox, I updated the issue with this info.

My guess would be that is an issue with Chromium-based browsers (Arc, Brave and Chrome)

[dan5py]

Have you tried with different devices? I also use Arc and Brave but I cannot see the blur in any of them.

[oscartorres-10]

Have you tried with different devices? I also use Arc and Brave but I cannot see the blur in any of them.

Yes, I tried on an iOS device and I don't see the issue, apart from that I don't have other desktop devices to test.

[marlomgirardi]

~~It also happens on Safari and same devices as @oscartorres-10, I'm using Macos. Had not investigated too much but used an old trick, worked fine on chromium and safari on changing the Dialog component from translate-y-[-50%] to translate-y-[-50.4%]~~

Remove rounded-md from Command https://github.com/shadcn-ui/ui/issues/711#issuecomment-1999699800

[usaamatahir]

@oscartorres-10 remove the border-radius class sm:rounded-lg from Dialog content DialogPrimitive.Content and it will be fixed

[hugodias]

It also happens on Safari and same devices as @oscartorres-10, I'm using Macos. Had not investigated too much but used an old trick, worked fine on chromium and safari on changing the Dialog component from translate-y-[-50%] to translate-y-[-50.4%]

For me, 50.4% was still blurred. 51% did the trick

[divmgl]

This fixed it for me. Specifically I had to remove rounded-md on Command.

[dogukanoksuz]

removing rounded-md works thanks

[LucasWinkler]

@oscartorres-10 remove the border-radius class sm:rounded-lg from Dialog content DialogPrimitive.Content and it will be fixed

Same issue for me on Chrome and this also fixed it for me.

[lumpinif]

This fixed it for me. Specifically I had to remove rounded-md on Command.

translate-y-[-50.4%] doesn't work for me, but this is working

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.