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
parent
761dfac033
commit
0f3e0a1554
|
@ -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">
|
||||
<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>
|
||||
{/* @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>}
|
||||
{props.actions && <div className="ml-auto mt-2 text-sm sm:mt-0 md:relative">{props.actions}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue