From 4ac624dd8640d9638f1c5c10a16b65da743bc215 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 25 Jan 2024 15:23:14 +0200
Subject: [PATCH] fix: Make the Paired device card full width for mobile

---
 .../ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx
index 57b31c36..31258d92 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx
@@ -1,8 +1,10 @@
 import { XStack, YStack } from 'tamagui'
 import { InfoBadgeIcon } from '@status-im/icons'
 import { Avatar, Text } from '@status-im/components'
+import { useWindowSize } from '../../../../hooks/useWindowSize'
 
 const PairedDeviceCard = () => {
+  const windowSize = useWindowSize()
   return (
     <XStack
       space={'$7'}
@@ -10,11 +12,13 @@ const PairedDeviceCard = () => {
         padding: '6px 12px',
         border: '1px solid #DCE0E5',
         borderRadius: '10px',
-        marginBottom:'20px'
+        marginBottom: '20px',
+        width: windowSize.width < 580 ? '100%' : 'auto',
       }}
+      justifyContent="space-between"
       alignItems={'center'}
     >
-      <XStack space={'$3'} alignItems={'center'}>
+      <XStack space={'$3'}>
         <Avatar
           backgroundColor="pink"
           type="icon"