You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by en...@apache.org on 2025/05/27 07:15:45 UTC

(superset) 02/04: fix(cards grid): centered cards inside the grid

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

enzomartellucci pushed a commit to branch enxdev/fix/theming/visual-regressions
in repository https://gitbox.apache.org/repos/asf/superset.git

commit f107f01fc7351f3e23e7ce804cd69a638e6efebd
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Sat May 17 20:44:03 2025 +0200

    fix(cards grid): centered cards inside the grid
---
 superset-frontend/src/components/ListView/CardCollection.tsx | 1 +
 superset-frontend/src/views/CRUD/utils.tsx                   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx
index 174d1f0b7e..291f2d3782 100644
--- a/superset-frontend/src/components/ListView/CardCollection.tsx
+++ b/superset-frontend/src/components/ListView/CardCollection.tsx
@@ -33,6 +33,7 @@ interface CardCollectionProps {
 const CardContainer = styled.div<{ showThumbnails?: boolean }>`
   ${({ theme, showThumbnails }) => `
     display: grid;
+    justify-content: center;
     grid-gap: ${theme.sizeUnit * 12}px ${theme.sizeUnit * 4}px;
     grid-template-columns: repeat(auto-fit, 300px);
     margin-top: ${theme.sizeUnit * -6}px;
diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index a11f9c5dd7..946660cd41 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -365,6 +365,7 @@ export const CardContainer = styled.div<{
   ${({ showThumbnails, theme }) => `
     overflow: hidden;
     display: grid;
+    justify-content: center;
     grid-gap: ${theme.sizeUnit * 12}px ${theme.sizeUnit * 4}px;
     grid-template-columns: repeat(auto-fit, 300px);
     max-height: ${showThumbnails ? '314' : '148'}px;