style(listview): dynamic card size and grid spacing (#11111)

superset-frontend/src/components/ListView/CardCollection.tsx

@@ -31,9 +31,8 @@ interface CardCollectionProps {
 
 const CardContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(459px, max-content));
+  grid-template-columns: repeat(auto-fit, minmax(459px, 1fr));
   grid-gap: ${({ theme }) => theme.gridUnit * 8}px;
-  justify-content: center;
   padding: ${({ theme }) => theme.gridUnit * 2}px
     ${({ theme }) => theme.gridUnit * 4}px;
 `;

superset-frontend/src/components/ListViewCard/ImageLoader.test.jsx

@@ -34,7 +34,7 @@ fetchMock.get(
   },
 );
 
-describe('ListViewCard', () => {
+describe('ImageLoader', () => {
   const defaultProps = {
     src: '/thumbnail',
     fallback: '/fallback',
@@ -55,19 +55,19 @@ describe('ListViewCard', () => {
 
   it('fetches loads the image in the background', async () => {
     const wrapper = factory();
-    expect(wrapper.find('img').props().src).toBe('/fallback');
+    expect(wrapper.find('div').props().src).toBe('/fallback');
     await waitForComponentToPaint(wrapper);
     expect(fetchMock.calls(/thumbnail/)).toHaveLength(1);
     expect(global.URL.createObjectURL).toHaveBeenCalled();
-    expect(wrapper.find('img').props().src).toBe('/local_url');
+    expect(wrapper.find('div').props().src).toBe('/local_url');
   });
 
   it('displays fallback image when response is not an image', async () => {
     fetchMock.once('/thumbnail2', {});
     const wrapper = factory({ src: '/thumbnail2' });
-    expect(wrapper.find('img').props().src).toBe('/fallback');
+    expect(wrapper.find('div').props().src).toBe('/fallback');
     await waitForComponentToPaint(wrapper);
     expect(fetchMock.calls(/thumbnail2/)).toHaveLength(1);
-    expect(wrapper.find('img').props().src).toBe('/fallback');
+    expect(wrapper.find('div').props().src).toBe('/fallback');
   });
 });

superset-frontend/src/components/ListViewCard/ImageLoader.tsx

@@ -17,22 +17,32 @@
  * under the License.
  */
 import React, { useEffect } from 'react';
-import { logging } from '@superset-ui/core';
+import { styled, logging } from '@superset-ui/core';
 
 interface ImageLoaderProps
   extends React.DetailedHTMLProps<
-    React.ImgHTMLAttributes<HTMLImageElement>,
-    HTMLImageElement
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
   > {
   fallback: string;
   src: string;
   isLoading: boolean;
 }
+type ImageContainerProps = {
+  src: string;
+};
+
+const ImageContainer = styled.div`
+  background-image: url(${({ src }: ImageContainerProps) => src});
+  background-size: cover;
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+`;
 
 export default function ImageLoader({
   src,
   fallback,
-  alt,
   isLoading,
   ...rest
 }: ImageLoaderProps) {
@@ -61,5 +71,5 @@ export default function ImageLoader({
     };
   }, [src, fallback]);
 
-  return <img alt={alt || ''} src={isLoading ? fallback : imgSrc} {...rest} />;
+  return <ImageContainer src={isLoading ? fallback : imgSrc} {...rest} />;
 }

superset-frontend/src/components/ListViewCard/index.tsx

@@ -36,8 +36,6 @@ const ActionsWrapper = styled.div`
 `;
 
 const StyledCard = styled(Card)`
-  width: 459px;
-
   .ant-card-body {
     padding: ${({ theme }) => theme.gridUnit * 4}px
       ${({ theme }) => theme.gridUnit * 2}px;
@@ -65,7 +63,7 @@ const Cover = styled.div`
 
 const GradientContainer = styled.div`
   position: relative;
-  display: inline-block;
+  height: 100%;
 
   &:after {
     content: '';
@@ -83,12 +81,6 @@ const GradientContainer = styled.div`
     );
   }
 `;
-const CardCoverImg = styled(ImageLoader)`
-  display: block;
-  object-fit: cover;
-  width: 459px;
-  height: 264px;
-`;
 
 const TitleContainer = styled.div`
   display: flex;
@@ -173,7 +165,7 @@ function ListViewCard({
         <Cover>
           <a href={url}>
             <GradientContainer>
-              <CardCoverImg
+              <ImageLoader
                 src={imgURL}
                 fallback={imgFallbackURL}
                 isLoading={loading}

superset/utils/screenshots.py

@@ -203,4 +203,4 @@ class DashboardScreenshot(BaseScreenshot):
     thumbnail_type: str = "dashboard"
     element: str = "grid-container"
     window_size: WindowSize = (1600, int(1600 * 0.75))
-    thumb_size: WindowSize = (400, int(400 * 0.75))
+    thumb_size: WindowSize = (800, int(800 * 0.75))