From ecf3314611cda35e26bda4e413d31e9aeb2cb3dd Mon Sep 17 00:00:00 2001
From: lyndsiWilliams <kcatgirl@gmail.com>
Date: Mon, 22 Aug 2022 17:26:09 -0500
Subject: [PATCH] Fix blank dataset description styles

---
 .../src/components/EmptyState/index.tsx       |  4 ++-
 .../dataset/AddDataset/DatasetPanel/index.tsx | 30 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx
index 7ee69d7eea5e..3f5d586cf8d9 100644
--- a/superset-frontend/src/components/EmptyState/index.tsx
+++ b/superset-frontend/src/components/EmptyState/index.tsx
@@ -37,6 +37,7 @@ export interface EmptyStateSmallProps {
 export interface EmptyStateProps extends EmptyStateSmallProps {
   buttonText?: ReactNode;
   buttonAction?: React.MouseEventHandler<HTMLElement>;
+  className?: string;
 }
 
 export interface ImageContainerProps {
@@ -152,8 +153,9 @@ export const EmptyStateBig = ({
   description,
   buttonAction,
   buttonText,
+  className,
 }: EmptyStateProps) => (
-  <EmptyStateContainer>
+  <EmptyStateContainer className={className}>
     <ImageContainer image={image} size={EmptyStateSize.Big} />
     <TextContainer
       css={(theme: SupersetTheme) =>
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx
index 5362f0c5afac..294637a6f7b5 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx
@@ -17,14 +17,20 @@
  * under the License.
  */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { EmptyStateBig } from 'src/components/EmptyState';
 
+const StyledEmptyStateBig = styled(EmptyStateBig)`
+  p {
+    width: ${({ theme }) => theme.gridUnit * 115}px;
+  }
+`;
+
 const renderDescription = () => (
   <>
-    {t('Datasets can be created from database tables or SQL queries. Select ')}
-    <br />
-    {t('a database table to the left or ')}
+    {t(
+      'Datasets can be created from database tables or SQL queries. Select a database table to the left or ',
+    )}
     <span
       role="button"
       onClick={() => {
@@ -34,20 +40,16 @@ const renderDescription = () => (
     >
       {t('create dataset from SQL query')}
     </span>
-    {t(' to open ')}
-    <br />
-    {t('SQL Lab. From there you can save the query as a dataset.')}
+    {t(' to open SQL Lab. From there you can save the query as a dataset.')}
   </>
 );
 
 export default function DatasetPanel() {
   return (
-    <>
-      <EmptyStateBig
-        image="empty-dataset.svg"
-        title={t('Select dataset source')}
-        description={renderDescription()}
-      />
-    </>
+    <StyledEmptyStateBig
+      image="empty-dataset.svg"
+      title={t('Select dataset source')}
+      description={renderDescription()}
+    />
   );
 }