Merge pull request #1608 from woowacourse/fix/1603-roadmap-quiz-progr…

…ess-not-showing-on-safari Safari에서 로드맵 퀴즈 progress가 표시되지 않는 오류를 수정
woowacourse · Oct 18, 2023 · e712d1d · e712d1d
2 parents ffb4411 + 2ac2159
commit e712d1d
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/frontend/src/pages/RoadmapPage/components/Roadmap/SubKeyword.tsx b/frontend/src/pages/RoadmapPage/components/Roadmap/SubKeyword.tsx
@@ -29,7 +29,7 @@ const SubKeyword = (props: SubKeywordProps) => {
         font-weight: bold;
         cursor: pointer;
         border-radius: 4px;
-        overflow: hidden;
+        overflow: visible;
 
         &:hover {
           background: ${hsl(toAdjustedLightness(toHue(KeywordColors.SUB_KEYWORD, hue), -0.1))};
@@ -48,9 +48,8 @@ const SubKeyword = (props: SubKeywordProps) => {
           display: flex;
           align-items: flex-start;
           justify-content: flex-end;
-          position: absolute;
-          top: -5px;
-          right: -5px;
+          margin-right: -5px;
+          margin-top: -5px;
         `}
       >
         <QuizProgress totalCount={keyword.totalQuizCount} doneCount={keyword.doneQuizCount} />
@@ -64,6 +63,8 @@ const SubKeyword = (props: SubKeywordProps) => {
             : 'transparent'};
           margin-right: auto;
           box-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, 0.05);
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
         `}
       />
       <div