From 077449c56001c8a8c0ff5be70b39824bfbb886cd Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 12 Mar 2026 17:29:51 +0000
Subject: [PATCH] Alert: Make more responsive when buttons are present
 (#119971)

wrap buttons when content is smaller than 50% of alert
---
 .../grafana-ui/src/components/Alert/Alert.tsx | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index 0f70f0ee5e5..4420bd712b3 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/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>
     );