[@mantine/core] Alert: Fix content overlap with no title and with clo…

…se button (#3681) Co-authored-by: Ilya Krasov <krasov@addamant.ru>
mantinedev · Mar 8, 2023 · a2c3f82 · a2c3f82
1 parent 8df978b
commit a2c3f82
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/mantine-core/src/Alert/Alert.styles.ts b/src/mantine-core/src/Alert/Alert.styles.ts
@@ -58,7 +58,7 @@ export default createStyles((theme, { radius, color }: AlertStylesParams, { vari
     paddingTop: theme.spacing.sm,
     paddingBottom: theme.spacing.sm,
     paddingLeft: theme.spacing.md,
-    paddingRight: theme.spacing.md,
+    paddingRight: theme.spacing.sm,
     borderRadius: theme.fn.radius(radius),
     border: `${rem(1)} solid transparent`,
     ...getVariantStyles({ variant, color, theme }),
@@ -122,9 +122,7 @@ export default createStyles((theme, { radius, color }: AlertStylesParams, { vari
   },
 
   closeButton: {
-    position: 'absolute',
-    top: theme.spacing.sm,
-    right: theme.spacing.sm,
-    color: 'inherit',
+    width: rem(10),
+    height: rem(10),
   },
 }));
diff --git a/src/mantine-core/src/Alert/Alert.tsx b/src/mantine-core/src/Alert/Alert.tsx
@@ -99,21 +99,21 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props: AlertProps,
             </div>
           )}
 
-          {withCloseButton && (
-            <CloseButton
-              className={classes.closeButton}
-              onClick={onClose}
-              variant="transparent"
-              size={16}
-              iconSize={16}
-              aria-label={closeButtonLabel}
-            />
-          )}
-
           <div id={bodyId} className={classes.message}>
             {children}
           </div>
         </div>
+
+        {withCloseButton && (
+          <CloseButton
+            className={classes.closeButton}
+            onClick={onClose}
+            variant="transparent"
+            size={16}
+            iconSize={16}
+            aria-label={closeButtonLabel}
+          />
+        )}
       </div>
     </Box>
   );