fix major markdown bug

src/components/General/Markdown/Markdown.tsx

@@ -1,13 +1,20 @@
 import ReactMarkdown from 'react-markdown'
-
+import styles from './../../../pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/InstallLayout.module.css'
 import MarkdownLink from './MarkdownLink'
 
 type MarkdownProps = {
   children: string
 }
 
+
 const Markdown = ({ children }: MarkdownProps) => {
-  return <ReactMarkdown children={children} components={{ a: MarkdownLink }} />
+  return (
+    <ReactMarkdown
+      children={children}
+      components={{ a: MarkdownLink }}
+      className={styles['markdown-text']}
+    />
+  )
 }
 
 export default Markdown

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

@@ -1,4 +1,4 @@
-.osCardsContainer {
+.os-cards-container {
   display: flex;
   justify-content: space-between;
   display: grid;
@@ -7,36 +7,54 @@
   grid-template-columns: repeat(3, 1fr);
 }
 
-.osCard {
+.os-card {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 16px;
   padding: 12px 16px;
   cursor: pointer;
   box-sizing: border-box;
 }
+.markdown-text {
+  overflow-x: auto;
  
-.osCardSelected {
+   width:  90%;
+}
+.os-card-selected {
   background-color: #2a4af50d;
   border: 1px solid #2a4af566;
+  border-radius: 16px;
+  padding: 12px 16px;
+  cursor: pointer;
+  box-sizing: border-box;
 }
 
 @media (max-width: 1000px) {
-  .osCardsContainer {
+  .os-cards-container {
     grid-template-columns: repeat(2, 1fr);
   }
-  .osCard:nth-child(3) {
+  .os-card:nth-child(3) {
     width: 205%;
   }
 }
 
-@media (max-width: 750px) {
+@media (max-width: 850px) {
-  .osCardsContainer {
+  .os-cards-container {
     grid-template-columns: repeat(1, 1fr);
   }
-  .osCard {
+  .os-card {
     width: 100%;
   }
-  .osCard:nth-child(3) {
+  .os-card:nth-child(3) {
     width: 100%;
   }
 }
+@media (max-width: 750px) {
+  .os-cards-container {
+    grid-template-columns: repeat(1, 0.9fr);
+  }
+}
+@media (max-width: 650px) {
+  .os-cards-container {
+    grid-template-columns: repeat(1, 0.7fr);
+  }
+}

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

@@ -14,11 +14,11 @@ type OSCardsProps = {
 }
 const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
-    <div className={styles.osCardsContainer}>
+    <div className={styles['os-cards-container']}>
       {cards.map(card => (
         <div
           key={card.name}
-          className={`${styles.osCard} ${selectedOS === card.name ? styles.osCardSelected : ''}`}
+          className={selectedOS === card.name ? styles['os-card-selected'] : styles['os-card']}
           onClick={() => handleOSCardClick(card.name)}
         >
           <OSCard key={card.name} icon={card.icon} name={card.name} />

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

@@ -38,6 +38,7 @@ const ValidatorSetupInstall = () => {
         <Stack>
           <Markdown children={DOCUMENTATIONS[selectedClient].general} />
           <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
+
           <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
         </Stack>
       </YStack>