fix ExecCLientCards to be responsive

src/components/General/Icon.tsx

@@ -1,19 +1,20 @@
-import { Image } from '@status-im/components'
+import { Image } from 'tamagui'
 
 export type IconProps = {
   src: string
-  width?: number
-  height?: number
+  width?: string
+  height?: string
 }
 
-const Icon = ({ src, width = 16, height = 16 }: IconProps) => {
+const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
   return (
     <Image
       src={src}
       source={{ uri: src }}
-      width={width}
-      height={height}
+      width={'70%'}
+      height={100}
       style={{ backgroundColor: 'transparent' }}
+      minWidth={'110px'}
     />
   )
 }

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -49,6 +49,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         fontSize: '14px',
         zIndex: 1,
         width: '100%',
+        height: 'fit-content',
         padding: 0,
         marginBottom: '3rem',
         overflow: 'hidden',
@@ -59,7 +60,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
         return (
           <Step
             key={originalIndex}
-            label={step.label}
+            label={`${originalIndex + 1}. ${step.label}`}
             className="custom-step"
             onClick={() => changeStepOnClickHandler(originalIndex)}
             completed={activeStep > originalIndex - 1}

src/pages/ValidatorOnboarding/Overview/Overview.tsx

@@ -15,7 +15,7 @@ const Overview = () => {
       >
         <YStack>
           <YStack space={'$5'} width="150%">
-            <Text size={27} weight={'semibold'}>
+            <Text size={27} weight={'semibold'} marginTop={'2rem'}>
               Overview
             </Text>
             <Text size={19}>

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx

@@ -30,6 +30,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
         padding: '12px 16px',
         width: '19%',
         cursor: 'pointer',
+        minWidth: '150px',
       }}
       space={'$8'}
       onClick={() => {
@@ -58,7 +59,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
           </XStack>
         )}
       </Stack>
-      <Icon src={icon} width={100} height={100} />
+      <Icon src={icon} width={'100%'} height={'full'} />
     </YStack>
   )
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx

@@ -10,11 +10,18 @@ const ExecClientCards = () => {
       <Stack style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
         <Text size={27}>Select Execution client</Text>
       </Stack>
-      <XStack justifyContent={'space-between'}>
+      <Stack
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gap: '8px',
+          justifyContent: 'space-between',
+        }}
+      >
         {Object.entries(DOCUMENTATIONS).map(([name, { icon }], index) => (
           <ExecClientCard key={index} name={name} icon={icon} />
         ))}
-      </XStack>
+      </Stack>
     </YStack>
   )
 }