Alert component styling broken with Lucide Icon

[MurrayOB]

Pictures taken from the docs page: https://ui.shadcn.com/docs/components/alert

The alert component alongside Lucide icon like specified in the docs seem to be broken on the docs and when installing:

[dan5py]

Which browser are you using?

[MurrayOB]

Which browser are you using?

@dan5py Firefox

Just opened in Google and works fine, so seems to be Firefox

[dan5py]

Just opened in Google and works fine, so seems to be Firefox

@MurrayOB yeah, the issue appears only using Firefox since the :has pseudo-class isn't supported and the alert component makes use of that to add a left padding.

https://github.com/shadcn/ui/blob/3d717f992b26ee72db05b9020e4c951ee1dd8727/apps/www/components/ui/alert.tsx#L7-L7

There's nothing to do about it. We need to wait until Firefox adds support for this feature.

[MurrayOB]

Just opened in Google and works fine, so seems to be Firefox

@MurrayOB yeah, the issue appears only using Firefox since the :has pseudo-class isn't supported and the alert component makes use of that to add a left padding.

https://github.com/shadcn/ui/blob/3d717f992b26ee72db05b9020e4c951ee1dd8727/apps/www/components/ui/alert.tsx#LL7C143-L7C161

Thanks, I see, not sure if I should close this? Looks like it will be implemented into Firefox soon? https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idc-p/27010/highlight/true#M19088

[dan5py]

I hope so 🤞 . (For now leave the issue opened, in case someone else needs help with this)

[adham-coding]

Temporarily alternative variant [&>svg~*]:pl-7

[LukaHietala]

It's currently an experimental feature in Firefox, but you can enable it by changing layout.css.has-selector.enabled to true in about:config @MurrayOB

[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.