From adb59eaeb53864b1a52777fc7db8599099ded628 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:10:43 +0200
Subject: [PATCH] [v11.0.x] EmptyState: Set a max width on the empty state
 component (#86589)

EmptyState: Set a max width on the empty state component (#86569)

set a max width on the empty state component

(cherry picked from commit 21588ce7e2e89d8ecdc142cbb8b584d8726c2908)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../src/components/EmptyState/EmptyState.tsx  | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
index 548a1a66477..28d7f67724e 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
@@ -1,6 +1,10 @@
+import { css } from '@emotion/css';
 import React, { ReactNode } from 'react';
 import SVG from 'react-inlinesvg';
 
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
 import { Box } from '../Layout/Box/Box';
 import { Stack } from '../Layout/Stack/Stack';
 import { Text } from '../Text/Text';
@@ -37,22 +41,25 @@ export const EmptyState = ({
   hideImage = false,
   variant,
 }: React.PropsWithChildren<Props>) => {
+  const styles = useStyles2(getStyles);
   const imageToShow = image ?? getDefaultImageForVariant(variant);
 
   return (
-    <Box paddingY={4} gap={4} display="flex" direction="column" alignItems="center">
-      {!hideImage && imageToShow}
-      <Stack direction="column" alignItems="center">
-        <Text variant="h4" textAlignment="center">
-          {message}
-        </Text>
-        {children && (
-          <Text color="secondary" textAlignment="center">
-            {children}
+    <Box paddingY={4} display="flex" direction="column" alignItems="center">
+      <div className={styles.container}>
+        {!hideImage && imageToShow}
+        <Stack direction="column" alignItems="center">
+          <Text variant="h4" textAlignment="center">
+            {message}
           </Text>
-        )}
-      </Stack>
-      {button}
+          {children && (
+            <Text color="secondary" textAlignment="center">
+              {children}
+            </Text>
+          )}
+        </Stack>
+        {button}
+      </div>
     </Box>
   );
 };
@@ -73,3 +80,13 @@ function getDefaultImageForVariant(variant: Props['variant']) {
     }
   }
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(4),
+    maxWidth: '600px',
+  }),
+});