[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 21588ce)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

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',
+  }),
+});