From c5f67cebc65ff38dbea70cb556a35f00df1d5d1f Mon Sep 17 00:00:00 2001
From: Manabu Matsumoto <mmatsumoto1026@gmail.com>
Date: Mon, 6 May 2024 19:42:09 +0900
Subject: [PATCH] fix(UI): make the progression arrows be centered (#54595)

---
 client/src/components/Map/index.tsx | 22 ++++++++++----------
 client/src/components/Map/map.css   | 31 ++++++++++++++++++-----------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Map/index.tsx b/client/src/components/Map/index.tsx
index af36d1e18e4..5d880a7428f 100644
--- a/client/src/components/Map/index.tsx
+++ b/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}/`}>
diff --git a/client/src/components/Map/map.css b/client/src/components/Map/map.css
index ae26aeec7c8..a7cf9d4cc8b 100644
--- a/client/src/components/Map/map.css
+++ b/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 {