From 0f3e0a1554662ae90eb5c110738c9f1a90a1d7c9 Mon Sep 17 00:00:00 2001
From: Anit Jha <103268398+AnitKrJha@users.noreply.github.com>
Date: Sun, 18 Jun 2023 02:27:15 +0530
Subject: [PATCH] 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>
---
 packages/ui/components/alert/Alert.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index d27899a7d5..04efec5dfd 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -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>
   );