From fb1a7fe8107262baffd1d7423136a6002a1d8e03 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 22 Mar 2024 10:28:29 +0200
Subject: [PATCH] fix(uptime cards): make cards responsive

---
 .../ConsensusUptime/ConsensusUptimeCard.tsx     |  2 +-
 src/pages/Dashboard/DashboardContent.tsx        | 17 +++++++++--------
 .../ExecutionUptime/ExecutionUptime.tsx         |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx b/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
index e79cae8c..d4a021d9 100644
--- a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
+++ b/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
@@ -7,7 +7,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
 
 const ConsensusUptimeCard = () => {
   return (
-    <DashboardCardWrapper minWidth="100px">
+    <DashboardCardWrapper>
       <YStack space={'$3'}>
         <YStack>
           <Text size={15} weight={'semibold'}>
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index 3db72179..5d0d74d6 100644
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -21,7 +21,7 @@ const DashboardContent = () => {
   const { width } = useWindowSize()
   return (
     <YStack
-      space="$4"
+      space="$3"
       alignItems="flex-start"
       px="24px"
       minWidth="500px"
@@ -64,14 +64,14 @@ const DashboardContent = () => {
             width: '100%',
           }}
         >
-          <YStack space="$4">
-            <XStack space="$2" width="100%" flexWrap="wrap">
+          <YStack space="$3">
+            <XStack space="$2" width={'100%'}>
               <ConsensusUptimeCard />
               <ExecutionUptime />
             </XStack>
             <DeviceUptime />
           </YStack>
-          <YStack space={'$4'}>
+          <YStack space={'$3'}>
             <XStack space={'$4'}>
               <StorageCard maxStorage={100} storage={182} />
               <CPUCard load={[12, 31, 3, 2, 24, 98]} />
@@ -92,12 +92,13 @@ const DashboardContent = () => {
 }
 const DashboardContentLayout = (width: number) => {
   return (
-    <Stack width={'100%'}>
-      <YStack>
-        <XStack>
+    <Stack width={'100%'} space="$3">
+      <YStack space="$3">
+        <Stack space="$2" width={'100%'}>
           <ConsensusUptimeCard />
           <ExecutionUptime />
-        </XStack>
+        </Stack>
+
         <DeviceUptime />
       </YStack>
 
diff --git a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
index 51fb1a96..68f3ff1f 100644
--- a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
+++ b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
@@ -7,7 +7,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
 
 const ExecutionUptime = () => {
   return (
-    <DashboardCardWrapper minWidth="100px">
+    <DashboardCardWrapper>
       <YStack space={'$3'}>
         <YStack>
           <Text size={15} weight={'semibold'}>