fix: correct Alert vertical alignment when title is missing #7491
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes shadcn-ui#7465 - corrected import path from "@/components/ui/charts" to "@/components/ui/chart" in the documentation example
Fixes issue where Alert components with icon + description but no title were vertically offset due to CSS selector [&>svg+div]:translate-y-[-3px] applying to AlertDescription when no AlertTitle is present. Changed selector to [&>svg+h5+div]:translate-y-[-3px] to only apply the offset when there's actually a title (h5) between the icon and description. Fixes shadcn-ui#7473
Apply same fix to new-york variant - change [&>svg+div]:translate-y-[-3px] to [&>svg+h5+div]:translate-y-[-3px] to only apply offset when title is present. Fixes shadcn-ui#7473
|
@harshith-eth is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
|
Hey @harshith-eth! That's a great fix!! It definitely fixes the vertical alignment of the text, which was our primary ask!
If you're in this corner of the code, and familiar with how it works, is there any way we can also further vertically center the shape?
For context, I'm testing with Safari 18.5 and Chrome 136 Thank you for your quick response! 💛 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes issue where Alert components with icon + description but no title were vertically offset.
Problem
When using an Alert component with an icon and description but no title:
The description content was vertically offset due to the CSS selector
[&>svg+div]:translate-y-[-3px]applying to theAlertDescriptiondiv when noAlertTitlewas present.Solution
Changed the CSS selector from
[&>svg+div]:translate-y-[-3px]to[&>svg+h5+div]:translate-y-[-3px]to only apply the vertical offset when there's actually a title (h5element) between the icon and description.Changes
apps/www/registry/default/ui/alert.tsxapps/www/registry/new-york/ui/alert.tsx[&>svg+h5+div]:translate-y-[-3px]Testing
This fix ensures that:
Fixes #7473