feat(management-header): remove useWidth and move style to css module

src/pages/ValidatorManagement/ManagementHeader.tsx

@@ -1,30 +1,12 @@
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import SyncStatusCard from '../../components/General/SyncStatusCard'
-import { useWindowSize } from '../../hooks/useWindowSize'
+import styles from './validatorManagement.module.css'
 
 const ManagementHeader = () => {
-  const windowSize = useWindowSize()
-
   return (
-    <div
+    <div className={styles['header-container']}>
-      style={{
-        width: '100%',
-        justifyContent: 'space-between',
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '8px',
-      }}
-    >
       <NimbusLogo subtitle="Validator Management" />
-      <div
+      <div className={styles['sync-status-cards-container']}>
-        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}

src/pages/ValidatorManagement/ValidatorManagement.tsx

@@ -5,8 +5,8 @@ import ManagementTabs from './ManagementTabs'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
 import ManagementHeader from './ManagementHeader'
 import ManagementCard from './ManagementCard'
-import styles from './validatorManagement.module.css'
 import SidebarsWrapper from '../../components/PageWrappers/SidebarsWrapper'
+import styles from './validatorManagement.module.css'
 
 const ValidatorManagement = () => {
   return (

src/pages/ValidatorManagement/validatorManagement.module.css

@@ -1,9 +1,3 @@
-@media (max-width: 590px) {
-  .sync-status-card-container-second {
-    display: none;
-  }
-}
-
 .tabs-container {
   width: 100%;
   border: 1px solid #e7eaee;
@@ -37,6 +31,33 @@
   gap: 8px;
 }
 
+.header-container {
+  width: 100%;
+  justify-content: space-between;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.sync-status-cards-container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+@media (max-width: 790px) {
+  .sync-status-cards-container {
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 550px) {
+  .sync-status-cards-container {
+    flex-direction: column;
+  }
+}
+
 @media (max-width: 600px) {
   .tabs-settings-container {
     flex-direction: column;