fix(UI): make the progression arrows be centered (#54595)

client/src/components/Map/index.tsx

@@ -91,16 +91,18 @@ function MapLi({
         data-test-label='curriculum-map-button'
         data-playwright-test-label='curriculum-map-button'
       >
-        <div className='progress-icon'>
-          <RibbonIcon
-            value={index + 1}
-            showNumbers={showNumbers}
-            isCompleted={completed}
-            isClaimed={claimed}
-          />
-        </div>
-        <div className='progression-arrow'>
-          {!last && showArrows && <Arrow />}
+        <div className='progress-icon-wrapper'>
+          <div className='progress-icon'>
+            <RibbonIcon
+              value={index + 1}
+              showNumbers={showNumbers}
+              isCompleted={completed}
+              isClaimed={claimed}
+            />
+          </div>
+          <div className='progression-arrow'>
+            {!last && showArrows && <Arrow />}
+          </div>
         </div>
 
         <Link className='btn link-btn btn-lg' to={`/learn/${superBlock}/`}>

client/src/components/Map/map.css

@@ -8,22 +8,28 @@
   padding: 0;
 }
 
-.progression-arrow {
-  position: absolute;
-  bottom: -16px;
-  left: 25px;
-}
-
-.map-ui ul .progress-icon {
+.progress-icon-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 4rem;
-  margin: 0 10px 10px 0;
   position: relative;
 }
 
+.progression-arrow {
+  position: absolute;
+  top: calc(78%);
+  left: 21px;
+}
+
+.map-ui ul .progress-icon {
+  position: relative;
+  right: 7px;
+  width: 4rem;
+  display: flex;
+  justify-content: center;
+}
+
 .map-ui ul .progress-icon .cert-icon-outline {
   width: 4rem;
   height: 4rem;
@@ -43,9 +49,10 @@
 .map-ui ul li {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
+}
+
+.map-ui ul li a > svg {
+  overflow: visible;
 }
 
 .map-ui ul li .arrow path {