fix: small rendering for no results message (#309)

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/NoResultsComponent.tsx

@@ -1,8 +1,11 @@
 import React, { CSSProperties, useMemo } from 'react';
 
 const MESSAGE_STYLES: CSSProperties = { maxWidth: 800 };
-const TITLE_STYLES: CSSProperties = { fontSize: 20, fontWeight: 'bold', paddingBottom: 8 };
-const BODY_STYLES: CSSProperties = { fontSize: 16 };
+const TITLE_STYLES: CSSProperties = { fontSize: 16, fontWeight: 'bold', paddingBottom: 8 };
+const BODY_STYLES: CSSProperties = { fontSize: 14 };
+const MIN_WIDTH_FOR_BODY = 250;
+const BODY_STRING =
+  'No results were returned for this query. If you expected results to be returned, ensure any filters are configured properly and the datasource contains data for the selected time range.';
 
 const generateContainerStyles: (
   height: number | string,
@@ -28,15 +31,19 @@ type Props = {
 const NoResultsComponent = ({ className, height, id, width }: Props) => {
   const containerStyles = useMemo(() => generateContainerStyles(height, width), [height, width]);
 
+  // render the body if the width is auto/100% or greater than 250 pixels
+  const shouldRenderBody = typeof width === 'string' || width > MIN_WIDTH_FOR_BODY;
+
   return (
-    <div className={className} id={id} style={containerStyles}>
+    <div
+      className={className}
+      id={id}
+      style={containerStyles}
+      title={shouldRenderBody ? undefined : BODY_STRING}
+    >
       <div style={MESSAGE_STYLES}>
         <div style={TITLE_STYLES}>No Results</div>
-        <div style={BODY_STYLES}>
-          No results were returned for this query. If you expected results to be returned, ensure
-          any filters are configured properly and the datasource contains data for the selected time
-          range.
-        </div>
+        {shouldRenderBody && <div style={BODY_STYLES}>{BODY_STRING}</div>}
       </div>
     </div>
   );

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-chart/SuperChartStories.tsx

@@ -157,6 +157,16 @@ export default [
 
       return <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />;
     },
+    storyName: 'With no results and medium',
+    storyPath: '@superset-ui/chart|SuperChart',
+  },
+  {
+    renderStory: () => {
+      const width = text('Vis width', '150');
+      const height = text('Vis height', '200');
+
+      return <SuperChart chartType={ChartKeys.DILIGENT} width={width} height={height} />;
+    },
     storyName: 'With no results and small',
     storyPath: '@superset-ui/chart|SuperChart',
   },