[FE] 파이어폭스에서 리뷰인원이 보이지 않는 문제 해결(#694) (#696)

* fix: 특정 브라우저에서 리뷰 인원이 보이지 않는 문제 해결 * feat: 모달 세로 크기 증가 --------- Co-authored-by: Lee sang Yeop <[email protected]>
woowacourse-teams · Oct 24, 2024 · c132cc4 · c132cc4
1 parent 43166d7
commit c132cc4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/frontend/src/components/common/modal/Modal.style.ts b/frontend/src/components/common/modal/Modal.style.ts
@@ -104,7 +104,7 @@ export const ModalContent = styled.div<{ $isVisible: boolean; $isClosing: boolea
       transform: translate(-50%, -50%);
       border-radius: 8px;
       width: 480px;
-      height: 400px;
+      height: 500px;
     `}
 
     ${media.large`
@@ -114,7 +114,7 @@ export const ModalContent = styled.div<{ $isVisible: boolean; $isClosing: boolea
       transform: translate(-50%, -50%);
       border-radius: 8px;
       width: 600px;
-      height: 480px;
+      height: 580px;
     `}
   `}
 `;

diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts b/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts
@@ -266,3 +266,7 @@ export const ButtonWRapper = styled.div`
 export const ScreenReader = styled.div`
   ${VisuallyHidden}
 `;
+
+export const ReviewCount = styled.span`
+  font-size: ${({ theme }) => theme.TEXT.semiSmall};
+`;
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx
@@ -79,7 +79,7 @@ const RoomCardModalButton = ({ roomInfo }: RoomCardModalButtonProps) => {
             >
               -
             </Button>
-            <span>{matchingSize}</span>
+            <S.ReviewCount>{matchingSize}</S.ReviewCount>
             <Button
               variant={matchingSize === MAX_MATCHING_SIZE ? "disable" : "primary"}
               size="xSmall"