From f6abe73178ef89d4506e197960e9f99112b1fd66 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 18 Oct 2023 17:01:56 +0300
Subject: [PATCH] Add grid

---
 .../General/AddCards/AddCardsContainer.tsx    |  2 +-
 .../BalanceChartCard/BalanceChartCard.tsx     |  2 +-
 src/pages/Dashboard/DashboardContent.tsx      | 30 +++++++++++++------
 .../SyncStatusCards/SyncStatusCards.tsx       |  2 +-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/General/AddCards/AddCardsContainer.tsx b/src/components/General/AddCards/AddCardsContainer.tsx
index f0e74c11..0a4c7c61 100644
--- a/src/components/General/AddCards/AddCardsContainer.tsx
+++ b/src/components/General/AddCards/AddCardsContainer.tsx
@@ -8,7 +8,7 @@ const AddCardsContainer = () => {
   const cards = 2
 
   return (
-    <DashboardCardWrapper padding="0">
+    <DashboardCardWrapper padding="0" minWidth='150px'>
       <YStack height={'100%'}>
         {Array.from({ length: cards }).map(() => (
           <AddCard style={{ padding: '56px', height: getHeightPercentages(cards) }} />
diff --git a/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx b/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
index b05d125c..0239a772 100644
--- a/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
+++ b/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
@@ -37,7 +37,7 @@ const BalanceChartCard = () => {
   }
 
   return (
-    <DashboardCardWrapper minWidth={'536px'} maxWidth={'950px'}>
+    <DashboardCardWrapper minWidth={'536px'} >
       <YStack space={'$4'}>
         <XStack justifyContent={'space-between'}>
           <YStack>
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index 153712f5..61df4994 100644
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -12,7 +12,6 @@ import StorageCard from './StorageCard/StorageCard'
 import NetworkCard from './NetworkCard/NetworkCard'
 import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
 import MemoryCard from './MemoryCard/MemoryCard'
-
 const DashboardContent = () => (
   <YStack
     space="$4"
@@ -28,23 +27,34 @@ const DashboardContent = () => (
     minWidth="500px"
   >
     <TitleLogo />
-    <XStack space="$4" flexWrap="wrap">
-      <XStack space="$4" flexWrap="wrap">
+
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr 4fr',
+      gap: '16px', //   adjust this  ,
+      flexWrap: 'wrap',
+    }}>
+
+     
         <SyncStatusCard />
         <AddCardsContainer />
-      </XStack>
+       
       <BalanceChartCard />
-    </XStack>
+    </div>
+
+
     <BasicInfoCards />
-    <XStack space="$3" flexWrap="wrap">
-      <YStack space={'$4'} flexWrap="wrap">
-        <XStack justifyContent="space-between" flexWrap="wrap">
+
+    <XStack space="$3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+      <YStack space="$4">
+        <XStack justifyContent="space-between">
           <ConsensusUptimeCard />
           <ExecutionUptime />
         </XStack>
         <DeviceUptime />
       </YStack>
-      <YStack space={'$4'} flexWrap="wrap">
+
+      <YStack space="$4">
         <XStack space="$4">
           <StorageCard maxStorage={100} storage={82} />
           <CPUCard load={[12, 31, 3, 2, 24, 98]} />
@@ -58,6 +68,8 @@ const DashboardContent = () => (
         </XStack>
       </YStack>
     </XStack>
+
   </YStack>
 )
+
 export default DashboardContent
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx b/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
index 27dbbcc5..bbfabded 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
+++ b/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
@@ -7,7 +7,7 @@ import ConsensusCard from './ConsensusClientCard'
 
 const SyncStatusCard = () => {
   return (
-    <DashboardCardWrapper padding="0">
+    <DashboardCardWrapper padding="0" minWidth='250px'>
       <YStack space={'$2'}>
         <Stack style={{ paddingTop: '12px', paddingLeft: '16px' }}>
           <Text size={15} weight={'semibold'}>