feat(management-header): style containers for responsive cards

src/pages/ValidatorManagement/ManagementHeader.tsx

@@ -1,31 +1,44 @@
-import { XStack } from 'tamagui'
-
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import SyncStatusCard from '../../components/General/SyncStatusCard'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 const ManagementHeader = () => {
+  const windowSize = useWindowSize()
+
   return (
-    <XStack
+    <div
       style={{
         width: '100%',
         justifyContent: 'space-between',
-        alignItems: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '8px',
       }}
     >
       <NimbusLogo subtitle="Validator Management" />
-      <SyncStatusCard
+      <div
-        synced={123.524}
+        style={{
-        total={172.503}
+          display: 'flex',
-        title="Execution Sync Status"
+          gap: '8px',
-        color="#2a4af5"
+          flexWrap: 'wrap',
-      />
+          minWidth: windowSize.width < 790 ? '100%' : '',
-      <SyncStatusCard
+          flexDirection: windowSize.width < 550 ? 'column' : 'row',
-        synced={123.524}
+        }}
-        total={172.503}
+      >
-        title="Consensus Sync Status"
+        <SyncStatusCard
-        color="#ff6161"
+          synced={123.524}
-      />
+          total={172.503}
-    </XStack>
+          title="Execution Sync Status"
+          color="#2a4af5"
+        />
+        <SyncStatusCard
+          synced={123.524}
+          total={172.503}
+          title="Consensus Sync Status"
+          color="#ff6161"
+        />
+      </div>
+    </div>
   )
 }