You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<UAlert:description="Vos clés API sont stockées localement dans votre navigateur."
:color="violet"
variant="subtle"
icon="i-lucide-info"
/>
Description
Hello, when using only the props description of an alert (to write something in font-normal) there is still a "mt-1" applied even if there is no title. It's a detail, but it breaks the alignment of the UI.
To prevent this problem, we could apply gap-1 on the parent div of title and description, or test if the title is set to apply the mt-1.
Thanks for this super lib, it's really great.
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered:
Even if we correct the mt-1 to mt-0, there's still an alignment problem:
My actual fix
To fix the problem I converted the inner div to flex-col and made it align itself in center, tested with actions and other props and all looks good.
<UAlert:ui="{ inner: 'flex flex-col self-center', description: 'mt-0' }"
:description="Vos clés API sont stockées localement dans votre navigateur."
:color="violet"
variant="subtle"
icon="i-lucide-info"
/>
XStarlink
changed the title
Alert: UI Alignment problem when using only the props 'description'
UAlert: UI Alignment problem when using only the props 'description'
Feb 24, 2024
Environment
Version
v2.14.1
Reproduction
Description
Hello, when using only the props description of an alert (to write something in font-normal) there is still a "mt-1" applied even if there is no title. It's a detail, but it breaks the alignment of the UI.
To prevent this problem, we could apply gap-1 on the parent div of title and description, or test if the title is set to apply the mt-1.
Thanks for this super lib, it's really great.
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: