[bug]: Alert components that include a shape and exclude a Title aren't vertically centered

[jonathanmarchuot]

Describe the bug

• Alerts with a Shape + Title + Description display correctly.

• Alerts with only a Description display correctly.

• Alerts with a Shape + Description (and title excluded): contents are vertically offset. (see below)

Affected component/components

Alert

How to reproduce

<Alert>
    <AlertCircle className="h-4 w-4" />
    <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>

Notes

It looks like Alert is based on the Radix Callout primitive, and it doesn't look like Alert is inheriting the problem from there.

System Info

Next.js 15.2.4 on a node:22-alpine Docker image

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[learnwithsatyam]

Hi Jonathan, I would like to pick up this issue. I just want to confirm if this is already assigned to someone else.

[Wolfr]

I tend to solve this problem in design by offsetting the icon itself

[learnwithsatyam]

@jonathanmarchuot Hi I believe that the issue is solved. Here is a screenshot for it on my machine.

I am using NextJs.

Please let me know and I will make a PR.

(url)

[jonathanmarchuot]

@harshith-eth's #7491 fixes the vertical centering of the text, but the lucide-react images are not yet vertically centered.

All the attention to fix this is greatly appreciated. Thanks to all!