fix: alert component broken layout (#4087)

flarum · Oct 22, 2024 · dc5a7ac · dc5a7ac
1 parent 51015b3
commit dc5a7ac
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git 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
@@ -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;
 }