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 {