design: 가수, 제목 텍스트 디테일 처리로 듣기 인터페이스 짤리지 않도록 함

woowacourse-teams · Sep 30, 2023 · 56d8c26 · 56d8c26
1 parent adba711
commit 56d8c26
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/frontend/src/features/songs/components/SongDetailItem.tsx b/frontend/src/features/songs/components/SongDetailItem.tsx
@@ -78,14 +78,21 @@ const SongInfoContainer = styled.div`
 const Info = styled.div``;
 
 const SongTitle = styled.div`
-  height: 30px;
   font-size: 20px;
   font-weight: 700;
   color: ${({ theme: { color } }) => color.white};
 
-  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+  @media (max-width: ${({ theme }) => theme.breakPoints.lg}) {
+    width: 220px;
     font-size: 18px;
   }
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
+    font-size: 16px;
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {
     font-size: 16px;
@@ -97,11 +104,11 @@ const Singer = styled.div`
   font-weight: 700;
   color: ${({ theme: { color } }) => color.subText};
 
-  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+  @media (max-width: ${({ theme }) => theme.breakPoints.lg}) {
     font-size: 16px;
   }
 
-  @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
     font-size: 14px;
   }
 `;