fix: 안내면진다 제목 길 때 UI 깨지는 문제 해결

woowacourse-teams · Oct 16, 2024 · 0f7c7a4 · 0f7c7a4
1 parent 1075035
commit 0f7c7a4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.style.ts b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.style.ts
@@ -8,8 +8,9 @@ export const containerStyle = css`
 
 export const titleBox = () => css`
   display: flex;
-  gap: 1rem;
-  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
 `;
 
 export const title = (props: { theme: Theme }) => css`

diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.style.ts
@@ -27,3 +27,10 @@ export const count = ({ theme }: { theme: Theme }) => css`
   ${theme.typography.b3}
   color: ${theme.colorPalette.black[30]};
 `;
+
+export const tagBox = css`
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-width: 80px;
+`;
diff --git a/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx b/frontend/src/pages/Bet/BetListPage/components/BetCardList/BetCard/BetCard.tsx
@@ -19,7 +19,7 @@ export default function BetCard(props: BetCardProps) {
         <div css={S.title({ theme })}>{bet.title}</div>
         <div css={S.count({ theme })}>현재 {bet.currentParticipants}명</div>
       </div>
-      <div>
+      <div css={S.tagBox}>
         <Tag isAnnounced={bet.isAnnounced} deadline={bet.deadline} />
       </div>
     </div>