From 3d602d2ed4ee2d812ff5878f29b03e7208f249b2 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 11 Feb 2022 15:49:09 +0100
Subject: [PATCH] Add max widths

---
 .../src/components/EmptyState/index.tsx       | 60 +++++++++++++------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx
index bc64f7bf83313..99a6ce7bc7160 100644
--- a/superset-frontend/src/components/EmptyState/index.tsx
+++ b/superset-frontend/src/components/EmptyState/index.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import { styled, css } from '@superset-ui/core';
+import { styled, css, SupersetTheme } from '@superset-ui/core';
 import { Empty } from 'src/common/components';
 import Button from 'src/components/Button';
 
@@ -61,6 +61,8 @@ const EmptyStateContainer = styled.div`
   `}
 `;
 
+const TextContainer = styled.div``;
+
 const Title = styled.p`
   ${({ theme }) => css`
     font-size: ${theme.typography.sizes.m}px;
@@ -137,13 +139,21 @@ export const EmptyStateBig = ({
 }: EmptyStateProps) => (
   <EmptyStateContainer>
     <ImageContainer image={image} size={EmptyStateSize.Big} />
-    <BigTitle>{title}</BigTitle>
-    {description && <BigDescription>{description}</BigDescription>}
-    {buttonAction && buttonText && (
-      <ActionButton buttonStyle="primary" onClick={buttonAction}>
-        {buttonText}
-      </ActionButton>
-    )}
+    <TextContainer
+      css={(theme: SupersetTheme) =>
+        css`
+          max-width: ${theme.gridUnit * 150}px;
+        `
+      }
+    >
+      <BigTitle>{title}</BigTitle>
+      {description && <BigDescription>{description}</BigDescription>}
+      {buttonAction && buttonText && (
+        <ActionButton buttonStyle="primary" onClick={buttonAction}>
+          {buttonText}
+        </ActionButton>
+      )}
+    </TextContainer>
   </EmptyStateContainer>
 );
 
@@ -156,13 +166,21 @@ export const EmptyStateMedium = ({
 }: EmptyStateProps) => (
   <EmptyStateContainer>
     <ImageContainer image={image} size={EmptyStateSize.Medium} />
-    <Title>{title}</Title>
-    {description && <Description>{description}</Description>}
-    {buttonText && buttonAction && (
-      <ActionButton buttonStyle="primary" onClick={buttonAction}>
-        {buttonText}
-      </ActionButton>
-    )}
+    <TextContainer
+      css={(theme: SupersetTheme) =>
+        css`
+          max-width: ${theme.gridUnit * 100}px;
+        `
+      }
+    >
+      <Title>{title}</Title>
+      {description && <Description>{description}</Description>}
+      {buttonText && buttonAction && (
+        <ActionButton buttonStyle="primary" onClick={buttonAction}>
+          {buttonText}
+        </ActionButton>
+      )}
+    </TextContainer>
   </EmptyStateContainer>
 );
 
@@ -173,7 +191,15 @@ export const EmptyStateSmall = ({
 }: EmptyStateSmallProps) => (
   <EmptyStateContainer>
     <ImageContainer image={image} size={EmptyStateSize.Small} />
-    <Title>{title}</Title>
-    {description && <SmallDescription>{description}</SmallDescription>}
+    <TextContainer
+      css={(theme: SupersetTheme) =>
+        css`
+          max-width: ${theme.gridUnit * 75}px;
+        `
+      }
+    >
+      <Title>{title}</Title>
+      {description && <SmallDescription>{description}</SmallDescription>}
+    </TextContainer>
   </EmptyStateContainer>
 );