From 71df026348f4b1f82322ac21d652e97a12d0ff2f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 21 Mar 2024 23:59:03 +0200
Subject: [PATCH] fix(device uptime cards): fix spacing between uptime cards

---
 .../ConsensusUptime/ConsensusUptimeCard.tsx   |  2 +-
 src/pages/Dashboard/DashboardContent.tsx      | 23 +++++--------------
 .../Dashboard/DeviceUptime/DeviceUptime.tsx   |  4 ++--
 .../ExecutionUptime/ExecutionUptime.tsx       |  2 +-
 4 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx b/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
index 1a150de9..45fe25c5 100644
--- a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
+++ b/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
@@ -30,7 +30,7 @@ const ConsensusUptimeCard = () => {
               justifyContent: 'center',
               alignItems: 'center',
               width: '100%',
-              height: '100%',
+              height: '90%',
             }}
           >
             <UptimeChart
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index b7f9711c..3752c202 100644
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -64,17 +64,11 @@ const DashboardContent = () => {
             width: '100%',
           }}
         >
-          <YStack>
-            <Stack
-              style={{
-                display: 'grid',
-                gridTemplateColumns: '1fr 1fr',
-                gap: '8px',
-              }}
-            >
+          <YStack space="$3">
+            <XStack space="$2">
               <ConsensusUptimeCard />
               <ExecutionUptime />
-            </Stack>
+            </XStack>
             <DeviceUptime />
           </YStack>
           <YStack space={'$4'}>
@@ -100,18 +94,13 @@ const DashboardContentLayout = (width: number) => {
   return (
     <Stack width={'100%'}>
       <YStack>
-        <Stack
-          style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gap: '8px',
-          }}
-        >
+        <XStack>
           <ConsensusUptimeCard />
           <ExecutionUptime />
-        </Stack>
+        </XStack>
         <DeviceUptime />
       </YStack>
+
       <Stack
         style={{
           display: 'grid',
diff --git a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
index 7878d729..9a653676 100644
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
@@ -32,7 +32,7 @@ const DeviceUptime = () => {
 
   return (
     <DashboardCardWrapper minWidth="100px">
-      <YStack space={'$3'}>
+      <YStack>
         <XStack justifyContent={'space-between'}>
           <YStack>
             <Text size={15} weight={'semibold'}>
@@ -89,7 +89,7 @@ const DeviceUptime = () => {
               justifyContent: 'center',
               alignItems: 'center',
               width: '100%',
-              height: '100%',
+              height: '90%',
             }}
           >
             <UptimeChart
diff --git a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
index e302ae92..27a2383a 100644
--- a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
+++ b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
@@ -30,7 +30,7 @@ const ExecutionUptime = () => {
               justifyContent: 'center',
               alignItems: 'center',
               width: '100%',
-              height: '100%',
+              height: '90%',
             }}
           >
             <UptimeChart