fix: update alert style (#3714)

components/alert/index.tsx

@@ -165,8 +165,10 @@ const Alert = defineComponent({
             ref={alertNode}
           >
             {showIcon ? iconNode : null}
-            <span class={`${prefixCls}-message`}>{message}</span>
-            <span class={`${prefixCls}-description`}>{description}</span>
+            <div class={`${prefixCls}-content`}>
+              <div class={`${prefixCls}-message`}>{message}</div>
+              <div class={`${prefixCls}-description`}>{description}</div>
+            </div>
             {closeIcon}
           </div>
         </Transition>

components/alert/style/index.less

@@ -8,32 +8,34 @@
 @alert-close-color: @text-color-secondary;
 @alert-close-hover-color: @icon-color-hover;
 
+@alert-with-description-icon-size: 24px;
+@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
+@alert-with-description-padding-vertical: @padding-md - 1px;
+@alert-with-description-padding: @alert-with-description-padding-vertical 15px;
+
 .@{alert-prefix-cls} {
   .reset-component();
 
   position: relative;
-  padding: 8px 15px 8px 37px;
+  display: flex;
+  align-items: center;
+  padding: 8px 15px;
   word-wrap: break-word;
   border-radius: @border-radius-base;
 
-  &&-no-icon {
-    padding: 8px 15px;
-  }
-
-  &&-closable {
-    padding-right: 30px;
+  &-content {
+    flex: 1;
+    min-width: 0;
   }
 
   &-icon {
-    position: absolute;
-    top: 8px + (@font-size-base * @line-height-base / 2) - (@font-size-base / 2);
-    left: 16px;
+    margin-right: @margin-xs;
   }
 
   &-description {
     display: none;
     font-size: @font-size-base;
-    line-height: 22px;
+    line-height: @font-size-base + 8px;
   }
 
   &-success {
@@ -69,13 +71,11 @@
   }
 
   &-close-icon {
-    position: absolute;
-    top: 8px;
-    right: 16px;
+    margin-left: @margin-xs;
     padding: 0;
     overflow: hidden;
     font-size: @font-size-sm;
-    line-height: 22px;
+    line-height: @font-size-sm;
     background-color: transparent;
     border: none;
     outline: none;
@@ -99,30 +99,17 @@
   }
 
   &-with-description {
-    position: relative;
-    padding: 15px 15px 15px 64px;
-    color: @alert-text-color;
-    line-height: @line-height-base;
-    border-radius: @border-radius-base;
+    align-items: flex-start;
+    padding: @alert-with-description-padding;
   }
 
   &-with-description&-no-icon {
-    padding: 15px;
+    padding: @alert-with-description-no-icon-padding-vertical 15px;
   }
 
   &-with-description &-icon {
-    position: absolute;
-    top: 16px;
-    left: 24px;
-    font-size: 24px;
-  }
-
-  &-with-description &-close-icon {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    font-size: @font-size-base;
-    cursor: pointer;
+    margin-right: @alert-with-description-padding-vertical;
+    font-size: @alert-with-description-icon-size;
   }
 
   &-with-description &-message {