feat: More clear of compatible table

Magickbase · Jul 24, 2024 · 6e6a691 · 6e6a691
1 parent 5d011a7
commit 6e6a691
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/packages/neuron/src/pages/download/CompatibleTable/index.module.scss b/packages/neuron/src/pages/download/CompatibleTable/index.module.scss
@@ -28,8 +28,21 @@
 
     .cell {
       padding: 0 54px;
+    }
+
+    .versions {
+      display: flex;
+      flex-direction: row;
+
+      .name {
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        border-top: 1px solid #333;
+        border-right: 1px solid #333;
+      }
 
-      &:not(:first-child) {
+      .cell {
         border-top: 1px solid #333;
       }
     }
@@ -38,6 +51,7 @@
   .nodeVerions {
     flex: 1;
     min-width: 0;
+    border-left: 1px solid #333;
   }
 }
 
@@ -51,10 +65,6 @@
   }
 }
 
-.nodeCompatibleTableWrapper {
-  border-left: 1px solid #333;
-}
-
 .nodeCompatibleTable {
   display: flex;
 

diff --git a/packages/neuron/src/pages/download/CompatibleTable/index.tsx b/packages/neuron/src/pages/download/CompatibleTable/index.tsx
@@ -40,12 +40,17 @@ const CompatibleTable$Desktop: FC<
     <div {...elProps} className={clsx(styles.compatibleTable, elProps.className)}>
       <div className={styles.neuronVersions}>
         <div className={styles.cell} />
-        <div className={styles.cell}>Neuron</div>
-        {neuronVersions.map(ver => (
-          <div key={ver} className={styles.cell}>
-            {ver}
+        <div className={styles.cell} />
+        <div className={styles.versions}>
+          <div className={styles.name}>Neuron</div>
+          <div>
+            {neuronVersions.map(ver => (
+              <div key={ver} className={styles.cell}>
+                {ver}
+              </div>
+            ))}
           </div>
-        ))}
+        </div>
       </div>
 
       {!hideFullNodeColumn && (