[superset] 04/05: restyle the thumbnail list

[suddjian]

This is an automated email from the ASF dual-hosted git repository.

suddjian pushed a commit to branch viz-gallery-component
in repository https://gitbox.apache.org/repos/asf/superset.git

commit f942f252018899f1f7ea108cbfcdf031758d368f
Author: David Aaron Suddjian <aasuddj...@gmail.com>
AuthorDate: Thu Jul 1 15:37:31 2021 -0700

    restyle the thumbnail list
---
 .../controls/VizTypeControl/VizTypeGallery.tsx        | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git 
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
 
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index d2987b9..3401104 100644
--- 
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ 
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -169,10 +169,22 @@ const CategoryLabel = styled.button`
 const IconsPane = styled.div`
   grid-area: main;
   overflow: auto;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    ${({ theme }) => theme.gridUnit * THUMBNAIL_GRID_UNITS}px
+  );
+  grid-template-rows: repeat(auto-fill, max-content);
+  grid-auto-rows: max-content;
+  justify-content: space-evenly;
+  grid-gap: ${({ theme }) => theme.gridUnit * 2}px;
+  justify-items: center;
   padding: ${({ theme }) => theme.gridUnit * 2}px;
+  & > div:last-child .viztype-label {
+    // The IconsPane bottom padding doesn't work,
+    // hence this hacky workaround
+    margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+  }
 `;
 
 const DetailsPane = styled.div`
@@ -214,7 +226,6 @@ const Examples = styled.div`
 const thumbnailContainerCss = (theme: SupersetTheme) => css`
   cursor: pointer;
   width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
-  margin: ${theme.gridUnit * 2}px;
 
   img {
     border: 1px solid ${theme.colors.grayscale.light2};