fix: layout of actions for Alert component

Author: joshenlim

src/components/Alert/Alert.tsx

@@ -61,13 +61,13 @@ function Alert({
     <>
       {visible && (
         <div className={containerClasses.join(' ')}>
-          <div className="flex space-x-4">
-            {withIcon ? (
-              <div className={__styles.variant[variant].icon}>
-                {withIcon && icons[variant]}
-              </div>
-            ) : null}
-            {icon && icon}
+          {withIcon ? (
+            <div className={__styles.variant[variant].icon}>
+              {withIcon && icons[variant]}
+            </div>
+          ) : null}
+          {icon && icon}
+          <div className="flex flex-1 justify-between">
             <div>
               <h3
                 className={[
@@ -79,8 +79,8 @@ function Alert({
               </h3>
               <div className={descriptionClasses.join(' ')}>{children}</div>
             </div>
+            {actions}
           </div>
-          {actions}
           {closable && (
             <button
               aria-label="Close alert"

src/lib/theme/defaultTheme.ts

@@ -253,7 +253,7 @@ export default {
   alert: {
     base: `
       relative rounded border py-4 px-6 
-      flex justify-between space-x-4 items-start 
+      flex space-x-4 items-start 
     `,
     header: 'block text-sm font-normal mb-1',
     description: `text-xs`,