From 41ffdb1ecab8ef8b2c65f90c4b4bc61c95f79589 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 9 May 2024 16:51:55 +0300
Subject: [PATCH] feat(validator-management): add responsive style for basic
 cards

---
 .../ValidatorManagement/ValidatorManagement.tsx    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx
index 699b8b17..6732858b 100644
--- a/src/pages/ValidatorManagement/ValidatorManagement.tsx
+++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx
@@ -14,6 +14,12 @@ const ValidatorManagement = () => {
 
   const isDeviceCardColumn = width < 900
   const isBasicCardColumn = width > 600 || width <= 475
+
+  const basicCardStyle = {
+    height: isBasicCardColumn ? 'calc(50% - 8px)' : '100%',
+    width: isBasicCardColumn ? '100%' : 'calc(50% - 8px)',
+  }
+
   return (
     <SidebarsWrapper isNotBottomPadding={true}>
       <div className={`${styles['main-container']} transparent-scrollbar`}>
@@ -30,15 +36,11 @@ const ValidatorManagement = () => {
             </div>
             <div className={styles['basic-info-cards-container']}>
               <BasicInfoCard
-                style={{ height: 'calc(50% - 8px)' }}
+                style={basicCardStyle}
                 title="Network Validators"
                 value="498,156"
               />
-              <BasicInfoCard
-                style={{ height: 'calc(50% - 8px)' }}
-                title="Queue"
-                value="145"
-              />
+              <BasicInfoCard style={basicCardStyle} title="Queue" value="145" />
             </div>
           </div>
         </div>