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

src/pages/ValidatorManagement/ManagementHeader.tsx

@@ -1,18 +1,30 @@
-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" />
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+          flexWrap: 'wrap',
+          minWidth: windowSize.width < 790 ? '100%' : '',
+          flexDirection: windowSize.width < 550 ? 'column' : 'row',
+        }}
+      >
         <SyncStatusCard
           synced={123.524}
           total={172.503}
@@ -25,7 +37,8 @@ const ManagementHeader = () => {
           title="Consensus Sync Status"
           color="#ff6161"
         />
-    </XStack>
+      </div>
+    </div>
   )
 }