Add event for window,innerWidth

src/pages/Dashboard/DashboardContent.tsx

@@ -12,7 +12,21 @@ import StorageCard from './StorageCard/StorageCard'
 import NetworkCard from './NetworkCard/NetworkCard'
 import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
 import MemoryCard from './MemoryCard/MemoryCard'
-const DashboardContent = () => (
+import { useEffect, useState } from 'react'
+const DashboardContent = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return (
     <YStack
       space="$4"
       alignItems="start"
@@ -20,29 +34,28 @@ const DashboardContent = () => (
       style={{
         flexGrow: '1',
         marginTop: '16px',
-      width: '50%',
         overflowY: 'auto',
-      maxHeight: '100vh',
       }}
       minWidth="500px"
+      width="50vh"
     >
       <TitleLogo />
 
       <div style={{
             display: 'grid',
-      gridTemplateColumns: '1fr 1fr',
-      gap: '16px' // You can adjust this value as per your needs
+            gridTemplateColumns: windowWidth < 1300 ? '0.5fr' : '25fr 25fr 90fr',
+            gap: '16px'
         }}>
-      <YStack space="$4">
+
         <SyncStatusCard />
         <AddCardsContainer />
-      </YStack>
+
         <BalanceChartCard />
       </div>
 
       <BasicInfoCards />
 
-    <XStack space="$3" >
+      <XStack space="$3" flexWrap='wrap' >
         <YStack space="$4">
           <XStack justifyContent="space-between">
             <ConsensusUptimeCard />
@@ -67,6 +80,7 @@ const DashboardContent = () => (
       </XStack>
     </YStack>
   )
+}
 
 export default DashboardContent