fix(dashboard top row): make top row responsive

src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx

@@ -5,7 +5,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
 
 const ActiveValidators = () => {
   return (
-    <DashboardCardWrapper padding="0" height="156px" minWidth="200px">
+    <DashboardCardWrapper padding="0" height="156px" minWidth="250px"  >
       <img
         src="/images/validators-count.png"
         alt=""

src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx

@@ -41,7 +41,7 @@ const BalanceChartCard = () => {
   }
 
   return (
-    <DashboardCardWrapper minWidth={'536px'}>
+    <DashboardCardWrapper minWidth={'436px'} width="100%">
       <YStack space={'$4'}>
         <XStack justifyContent={'space-between'}>
           <YStack>

src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx

@@ -6,7 +6,7 @@ import DoughnutChartHalf from '../../../components/Charts/HalfDoughnutWithGradie
 
 const ConnectedPeers = () => {
   return (
-    <DashboardCardWrapper padding="0" height="156ppx" minWidth="200px">
+    <DashboardCardWrapper padding="0" height="156ppx" minWidth="250px">
       <YStack height={'100%'}>
         <Stack
           style={{ minHeight: '90px', padding: '12px 16px', flex: 1 }}

src/pages/Dashboard/Dashboard.tsx

@@ -11,7 +11,7 @@ const Dashboard = () => {
     <XStack style={{ height: '100vh' }}>
       <LeftSidebar />
       <DashboardContent />
-      {width > 900 && <RightSideBar />}
+      {width > 1200 && <RightSideBar />}
     </XStack>
   )
 }

src/pages/Dashboard/DashboardContent.tsx

@@ -37,19 +37,21 @@ const DashboardContent = () => {
       <Stack
         style={{
           display: 'grid',
-          gridTemplateColumns: width < 1375 ? '1fr 1fr' : '2fr 1fr 1fr',
+          gridTemplateColumns: width < 1400 ? '1fr' : '1fr 1fr',
           gap: '8px',
           gridAutoFlow: 'row',
           width: '100%',
         }}
       >
-        <BalanceChartCard />
-        <SyncStatusCards />
-        {/* <AddCardsContainer cardsAmount={2} /> */}
-        <YStack space="$2">
-          <ActiveValidators></ActiveValidators>
-          <ConnectedPeers></ConnectedPeers>
-        </YStack>
+        {width >= 1400 && <BalanceChartCard />}
+        <XStack space="$3"  >
+          <SyncStatusCards />
+          <YStack space="$3" flexWrap="wrap">
+            <ActiveValidators></ActiveValidators>
+            <ConnectedPeers></ConnectedPeers>
+          </YStack>
+        </XStack>
+        {width < 1400 && <BalanceChartCard />}
       </Stack>
       <BasicInfoCards />