From 1a78f19e46b90eb2918b115c7c9ecd820058b663 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Fri, 9 Feb 2024 11:19:07 +0100
Subject: [PATCH] Make ParaTimes card responsive

---
 .../pages/ConsensusDashboardPage/ParaTimesCard.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
index 4f3f94b492..23457e602e 100644
--- 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}`,
+    },
   },
 }))