Alert: Make more responsive when buttons are present (#119971)

wrap buttons when content is smaller than 50% of alert

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -11,6 +11,7 @@ import { IconName } from '../../types/icon';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 import { Text } from '../Text/Text';
 export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 
@@ -84,17 +85,22 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
             </div>
           </Box>
 
-          <Box paddingY={1} grow={1}>
-            <Text color="primary" weight="medium">
-              {title}
-            </Text>
-            {children && <div className={styles.content}>{children}</div>}
-          </Box>
-          {action && (
-            <Box marginLeft={1} display="flex" alignItems="center">
-              {action}
+          <Stack alignItems="center" flex={1} wrap="wrap" columnGap={1} rowGap={0}>
+            <Box paddingY={1} flex={1} minWidth="50%">
+              <Text color="primary" weight="medium">
+                {title}
+              </Text>
+              {children && <div className={styles.content}>{children}</div>}
             </Box>
-          )}
+            <Stack alignItems="center" wrap="wrap">
+              {action}
+              {onRemove && buttonContent && (
+                <Button aria-label={closeLabel} variant="secondary" onClick={onRemove} type="button">
+                  {buttonContent}
+                </Button>
+              )}
+            </Stack>
+          </Stack>
           {/* If onRemove is specified, giving preference to onRemove */}
           {onRemove && !buttonContent && (
             <div className={styles.close}>
@@ -108,14 +114,6 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
               />
             </div>
           )}
-
-          {onRemove && buttonContent && (
-            <Box marginLeft={1} display="flex" alignItems="center">
-              <Button aria-label={closeLabel} variant="secondary" onClick={onRemove} type="button">
-                {buttonContent}
-              </Button>
-            </Box>
-          )}
         </Box>
       </div>
     );