Fixed Experience tab changed it to display grid

Author: siddharthmohite

app/routes/components/Experience.jsx

@@ -24,13 +24,10 @@ export default function Experience(){
             </div>
         </div>
         <div className="info-bar">
-            <span className="info-bar__name">Name</span>
-            <div className="info-bar__divider-vertical"></div>
-            <span className="info-bar__skills">Skills</span>
-            <div className="info-bar__divider-vertical"></div>
-            <span className="info-bar__date-started">Start Date</span>
-            <div className="info-bar__divider-vertical"></div>
-            <span className="info-bar__date-started">End Date</span>
+            <div className="info-bar__name">Name</div>
+            <div className="info-bar__skills">| Skills</div>
+            <div className="info-bar__date-started">| Start Date</div>
+            <div className="info-bar__date-ended">| End Date</div>
         </div>
         <div className="divider-horizontal"></div>
         <div className="exp-container">

app/routes/styles/Experience.scss

@@ -25,36 +25,52 @@
     width: 100%;
 }
 .info-bar{
-    display:flex;
-    flex-direction:row;
-    height: 2rem;
+    // display:flex;
+    // flex-direction:row;
+    // display:grid;
+    // grid-template-columns: 2.9fr 2fr 1fr 1fr; // Adjust column sizes as needed
+    grid-template-columns: 2.8fr 2.2fr 1.5fr 1fr; ;
+    // align-items: center;
+    // height: 2rem;
+    display: grid;
+    /* Create 4 equal-width columns */
+    // grid-template-columns: repeat(4, 0.1fr);
+    /* Optional: spacing between columns */
+    // gap: 1rem;
 
     &__name{
         font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
         font-size: 0.7rem;
         font-weight:200;
-        margin: 0.6rem;
-        margin-left: 2rem;
-        margin-right: 13.5rem;
+        margin-top: 0.6rem;
+        margin-bottom: 0.6rem;
+        margin-left: 0.6rem;
 
     }
 
     &__skills{
         font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
         font-size: 0.7rem;
         font-weight:200;
-        margin: 0.6rem;
-        margin-left: 0.6rem;
-        margin-right: 9.5rem;
+        margin-top: 0.6rem;
+        margin-bottom: 0.6rem;
     }
 
     &__date-started{
         font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
         font-size: 0.7rem;
         font-weight:200;
-        margin: 0.6rem;
-        margin-left: 0.6rem;
-        margin-right: 4rem;
+        margin-top: 0.6rem;
+        margin-bottom: 0.6rem;
+        white-space: nowrap;
+    }
+    &__date-ended{
+        font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
+        font-size: 0.7rem;
+        font-weight:200;
+        margin-top: 0.6rem;
+        margin-bottom: 0.6rem;        
+        margin-right: 2.5rem;
         white-space: nowrap;
     }