fix: Alert component fixed (#9605)

* fix: Alert Component Fixed

* Update packages/ui/components/alert/Alert.tsx

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/9505/head^2
Anit Jha 2023-06-18 02:27:15 +05:30 committed by GitHub
parent 761dfac033
commit 0f3e0a1554
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions

View File

@ -32,7 +32,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
severity === "success" && "bg-inverted text-inverted",
severity === "neutral" && "bg-subtle text-default"
)}>
<div className="relative flex flex-col md:flex-row">
<div className="relative flex md:flex-row">
{CustomIcon ? (
<div className="flex-shrink-0">
<CustomIcon aria-hidden="true" className={classNames("text-default h-5 w-5", iconClassName)} />
@ -71,13 +71,13 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
)}
</div>
)}
<div className="ml-3 flex-grow">
<h3 className="text-sm font-medium">{props.title}</h3>
<div className="text-sm">{props.message}</div>
<div className="flex flex-grow flex-col sm:flex-row">
<div className="ml-3 ">
<h3 className="text-sm font-medium">{props.title}</h3>
<div className="text-sm">{props.message}</div>
</div>
{props.actions && <div className="ml-auto mt-2 text-sm sm:mt-0 md:relative">{props.actions}</div>}
</div>
{/* @TODO: Shouldn't be absolute. This makes it harder to give margin etc. */}
{props.actions && <div className="absolute top-1 right-1 text-sm md:relative">{props.actions}</div>}
</div>
</div>
);