Make ParaTimes card responsive

oasisprotocol · Feb 9, 2024 · 1a78f19 · 1a78f19
1 parent 92392c8
commit 1a78f19
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
@@ -11,10 +11,18 @@ import { RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { EnabledRuntimePreview, InactiveRuntimePreview } from './RuntimePreview'
 
-const StyledBox = styled(Box)(() => ({
+const StyledBox = styled(Box)(({ theme }) => ({
   display: 'flex',
+  [theme.breakpoints.down('md')]: {
+    flexDirection: 'column',
+  },
   '> div:not(:last-child)': {
-    borderRight: `1px solid ${COLORS.grayMediumLight}`,
+    [theme.breakpoints.down('md')]: {
+      borderBottom: `1px solid ${COLORS.grayMediumLight}`,
+    },
+    [theme.breakpoints.up('md')]: {
+      borderRight: `1px solid ${COLORS.grayMediumLight}`,
+    },
   },
 }))