From fc9be4404d741917bd24dff89136a2591db9ad0b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 10 Jan 2024 18:56:15 +0200
Subject: [PATCH] feat: make keystore backups card responsive

---
 .../KeystoreFiles/KeystoreBackupsCard.tsx             |  1 -
 .../KeyGeneration/KeystoreFiles/KeystoreFiles.tsx     | 11 +++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
index 26dabfe8..dd598939 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreBackupsCard.tsx
@@ -17,7 +17,6 @@ const KeystoreBackupsCard = () => {
         border: '1px solid #DCE0E5',
         borderRadius: '16px',
         padding: '12px 16px',
-        width: '32%',
         marginTop: '3.4%',
         cursor: 'pointer',
       }}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
index a6c4f098..247a442d 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles/KeystoreFiles.tsx
@@ -58,11 +58,8 @@ const KeystoreFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <StackComponent
-        space={'$2'}
-        style={{ justifyContent: 'space-between', width: '100%' }}
-      >
-        <YStack space={'$4'} style={{ width: '66%' }}>
+      <StackComponent space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+        <YStack space={'$4'} style={{ width: media.sm ? '100%' : '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
               Encryption Password
@@ -102,7 +99,9 @@ const KeystoreFiles = () => {
             />
           </YStack>
         </YStack>
-        <KeystoreBackupsCard />
+        <div style={{ width: media.sm ? '100%' : '32%', paddingTop: media.sm ? 0 : '1.2%' }}>
+          <KeystoreBackupsCard />
+        </div>
       </StackComponent>
       <Stack style={{ width: 'fit-content' }}>
         <Button onPress={generateKeystoreFilesHandler}>Generate Key files</Button>