Move margin out of SnapshotCard to render card in ParaTimes cards

src/app/components/Snapshots/Snapshot.tsx

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react'
+import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
@@ -42,3 +43,13 @@ export const Snapshot: FC<SnapshotProps> = ({ children, header, scope, title })
     </>
   )
 }
+
+export const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: theme.spacing(4),
+  },
+  [theme.breakpoints.up('sm')]: {
+    paddingBottom: theme.spacing(5),
+  },
+}))

src/app/components/Snapshots/SnapshotCard.tsx

@@ -15,6 +15,7 @@ export const StyledCard = styled(Card)(({ theme }) => ({
   justifyContent: 'space-between',
   '&': {
     padding: 0,
+    margin: 0,
   },
   height: 186,
 }))

src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx

@@ -1,18 +1,12 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Grid from '@mui/material/Grid'
-import { styled } from '@mui/material/styles'
 import { SearchScope } from '../../../types/searchScope'
-import { Snapshot } from '../../components/Snapshots/Snapshot'
+import { Snapshot, StyledGrid } from '../../components/Snapshots/Snapshot'
 import { SnapshotEpoch } from './SnapshotEpoch'
 import { SnapshotDelegators } from './SnapshotDelegators'
 import { SnapshotValidators } from './SnapshotValidators'
 import { SnapshotStaked } from './SnapshotStaked'
 
-const StyledGrid = styled(Grid)(() => ({
-  display: 'flex',
-}))
-
 export const ConsensusSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
 

src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx

@@ -1,6 +1,4 @@
 import { FC, useState } from 'react'
-import Grid from '@mui/material/Grid'
-import { styled } from '@mui/material/styles'
 import { DurationSelect } from '../../components/Snapshots/DurationSelect'
 import { TransactionsChartCard } from './TransactionsChartCard'
 import { RosePriceCard } from './RosePriceCard'
@@ -13,11 +11,7 @@ import { Network } from '../../../types/network'
 import { getLayerLabels } from '../../utils/content'
 import { TestnetFaucet } from './TestnetFaucet'
 import { SearchScope } from '../../../types/searchScope'
-import { Snapshot } from 'app/components/Snapshots/Snapshot'
-
-const StyledGrid = styled(Grid)(() => ({
-  display: 'flex',
-}))
+import { Snapshot, StyledGrid } from 'app/components/Snapshots/Snapshot'
 
 export const ParaTimeSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()