diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx index b7933f8163..716282f780 100644 --- a/superset-frontend/src/views/CRUD/utils.tsx +++ b/superset-frontend/src/views/CRUD/utils.tsx @@ -301,15 +301,13 @@ export const mq = breakpoints.map(bp => `@media (max-width: ${bp}px)`); export const CardContainer = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(31%, 31%)); - ${[mq[3]]} { + ${mq[3]} { grid-template-columns: repeat(auto-fit, minmax(31%, 31%)); } - - ${[mq[2]]} { + ${mq[2]} { grid-template-columns: repeat(auto-fit, minmax(48%, 48%)); } - - ${[mq[1]]} { + ${mq[1]} { grid-template-columns: repeat(auto-fit, minmax(50%, 80%)); } grid-gap: ${({ theme }) => theme.gridUnit * 8}px; diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx index 8df7f12489..61e6ab85b0 100644 --- a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx +++ b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx @@ -74,15 +74,7 @@ const ActivityContainer = styled.div` margin-top: ${({ theme }) => theme.gridUnit * -4}px; display: grid; grid-template-columns: repeat(auto-fit, minmax(31%, max-content)); - ${[mq[3]]} { - grid-template-columns: repeat(auto-fit, minmax(31%, max-content)); - } - ${[mq[2]]} { - grid-template-columns: repeat(auto-fit, minmax(42%, max-content)); - } - ${[mq[1]]} { - grid-template-columns: repeat(auto-fit, minmax(63%, max-content)); - } + grid-gap: ${({ theme }) => theme.gridUnit * 8}px; justify-content: left; padding: ${({ theme }) => theme.gridUnit * 6}px; @@ -94,6 +86,15 @@ const ActivityContainer = styled.div` .ant-card-meta-title { font-weight: ${({ theme }) => theme.typography.weights.bold}; } + ${mq[3]} { + grid-template-columns: repeat(auto-fit, minmax(31%, max-content)); + } + ${mq[2]} { + grid-template-columns: repeat(auto-fit, minmax(42%, max-content)); + } + ${mq[1]} { + grid-template-columns: repeat(auto-fit, minmax(80%, max-content)); + } `; const UNTITLED = t('[Untitled]');