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'
>
-
-
-
-
- {!last && showArrows &&
}
+
+
+
+
+
+ {!last && showArrows &&
}
+
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 {