Add grid

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) }} />

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>

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

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'}>