From 23bc9c1c7ea49b1f8b0d8b1405394a15b7ba28ba Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 13 Oct 2023 14:46:51 +0300
Subject: [PATCH] use flexWrap=wrap in dashboard

---
 src/pages/Dashboard/Dashboard.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 608a23cf..7d26f157 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -17,18 +17,18 @@ import MemoryCard from './MemoryCard/MemoryCard'
 
 const Dashboard = () => {
   return (
-    <XStack justifyContent={'space-between'}  >
+    <XStack justifyContent={'space-between'} style={{ width: '80%' }}>
       <LeftSidebar />
 
       <YStack
         space={'$4'}
         alignItems="start"
         px="24px"
-        style={{ flexGrow: '1', marginTop: '16px' }}
+        style={{ flexGrow: '1', marginTop: '16px', width: '100%' }}
       >
         <TitleLogo />
-        <XStack space={'$4'} justifyContent={'space-between'} >
-          <XStack space={'$4'}  >
+        <XStack space={'$4'} justifyContent={'space-between'} flexWrap="wrap">
+          <XStack space={'$4'}>
             <SyncStatusCard />
             <AddCardsContainer />
           </XStack>
@@ -36,20 +36,20 @@ const Dashboard = () => {
         </XStack>
         <BasicInfoCards />
 
-        <XStack space="$3"  >
-          <YStack space={'$4'}  >
-            <XStack justifyContent="space-between">
+        <XStack space="$3" flexWrap="wrap">
+          <YStack space={'$4'}>
+            <XStack justifyContent="space-between" flexWrap="wrap">
               <ConsensusUptimeCard />
               <ExecutionUptime />
             </XStack>
             <DeviceUptime />
           </YStack>
-          <YStack space={'$4'}  >
-            <XStack space="$4"  >
+          <YStack space={'$4'}>
+            <XStack space="$4" flexWrap="wrap">
               <StorageCard maxStorage={100} storage={82} />
               <CPUCard load={[12, 31, 3, 2, 24, 98]} />
             </XStack>
-            <XStack space="$4"  >
+            <XStack space="$4" flexWrap="wrap">
               <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
               <NetworkCard
                 downloadRate={[12, 31, 22, 12, 23, 23, 90]}
@@ -62,8 +62,7 @@ const Dashboard = () => {
 
       <RightSidebar />
     </XStack>
-
   )
 }
 
-export default Dashboard
+export default Dashboard;
\ No newline at end of file