From dc5a7ac64714a4567a8ac34181c2c15fb9c7ab11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8?= <luotianyi@luotianyi.me>
Date: Wed, 23 Oct 2024 01:24:20 +0800
Subject: [PATCH] fix: alert component broken layout (#4087)

---
 .../core/js/src/common/components/Alert.tsx   | 24 ++++++++++---------
 framework/core/less/common/Alert.less         |  8 +++++--
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/framework/core/js/src/common/components/Alert.tsx b/framework/core/js/src/common/components/Alert.tsx
index d04c9e8294..8ad8686b72 100644
--- a/framework/core/js/src/common/components/Alert.tsx
+++ b/framework/core/js/src/common/components/Alert.tsx
@@ -61,17 +61,19 @@ export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<
     return (
       <div {...attrs}>
         <div className={classList('Alert-container', attrs.containerClassName)}>
-          {!!title && (
-            <div className="Alert-title">
-              {!!icon && (
-                <span className="Alert-title-icon">
-                  <Icon name={icon} />
-                </span>
-              )}
-              <span className="Alert-title-text">{title}</span>
-            </div>
-          )}
-          <span className="Alert-body">{content}</span>
+          <div className="Alert-content">
+            {!!title && (
+              <div className="Alert-title">
+                {!!icon && (
+                  <span className="Alert-title-icon">
+                    <Icon name={icon} />
+                  </span>
+                )}
+                <span className="Alert-title-text">{title}</span>
+              </div>
+            )}
+            <span className="Alert-body">{content}</span>
+          </div>
           <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
         </div>
       </div>
diff --git a/framework/core/less/common/Alert.less b/framework/core/less/common/Alert.less
index d66d723024..85f1f05f96 100644
--- a/framework/core/less/common/Alert.less
+++ b/framework/core/less/common/Alert.less
@@ -67,13 +67,17 @@
     display: none;
   }
 }
+.Alert-content {
+  flex-direction: column;
+}
 .Alert-title {
   margin-bottom: 8px;
   font-weight: bold;
-  display: flex;
   align-items: center;
   gap: 8px;
 }
-.Alert-container {
+.Alert-container,
+.Alert-content,
+.Alert-title {
   display: flex;
 }