Merge branch 'hn.validator-onboarding-responsive' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding-responsive

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css

@@ -1,6 +1,10 @@
 .osCardsContainer {
   display: flex;
   justify-content: space-between;
+  display: grid;
+  grid-gap: 15px;
+
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .osCard {
@@ -9,8 +13,6 @@
   padding: 12px 16px;
   cursor: pointer;
   box-sizing: border-box;
-  margin-bottom: 16px;
-  flex-basis: calc(33.333% - 10px);
 }
 
 .osCardSelected {
@@ -18,14 +20,23 @@
   border: 1px solid #2a4af566;
 }
 
-@media (max-width: 900px) {
-  .osCard {
-    flex-basis: calc(50% - 10px);
+@media (max-width: 1000px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .osCard:nth-child(3) {
+    width: 205%;
   }
 }
 
-@media (max-width: 680px) {
+@media (max-width: 750px) {
+  .osCardsContainer {
+    grid-template-columns: repeat(1, 1fr);
+  }
   .osCard {
-    flex-basis: 100%;
+    width: 90%;
+  }
+  .osCard:nth-child(3) {
+    width: 90%;
   }
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx

@@ -8,7 +8,7 @@ type OSCardProps = {
 }
 const OSCard = ({ name, icon }: OSCardProps) => {
   return (
-    <Stack>
+    <Stack >
       <Text size={19} weight={'semibold'}>
         {name}
       </Text>

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx

@@ -1,4 +1,3 @@
-import { Stack } from 'tamagui'
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
 import styles from './InstallLayout.module.css'

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx

@@ -18,7 +18,7 @@ const ValidatorSetupInstall = () => {
   }
 
   return (
-    <YStack style={{ padding: '26px 32px' }}>
+    <YStack style={{ padding: '26px 32px', width:'fit-content'}} >
       <Text size={27} weight={'semibold'}>
         Validator Setup
       </Text>
@@ -35,7 +35,7 @@ const ValidatorSetupInstall = () => {
         <Text size={19} weight={'semibold'}>
           Installing {selectedClient}
         </Text>
-        <Stack flexWrap="wrap">
+        <Stack>
           <Markdown children={DOCUMENTATIONS[selectedClient].general} />
           <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
           <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />