style: 제목이 길어지면 overflow되지 않는 문제 수정

#246
boostcampwm-2024 · Nov 29, 2024 · 5b90fc7 · 5b90fc7
1 parent d6e0494
commit 5b90fc7
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/client/src/features/page/components/PageTitle/PageTitle.style.ts b/client/src/features/page/components/PageTitle/PageTitle.style.ts
@@ -5,11 +5,11 @@ export const pageTitleContainer = css({
   gap: "8px",
   flexDirection: "row",
   alignItems: "center",
+  overflow: "hidden",
 });
 
 export const pageTitle = css({
   textStyle: "display-medium24",
-  display: "flex",
   alignItems: "center",
   paddingTop: "3px",
   color: "gray.500",

diff --git a/client/src/features/page/components/PageTitle/PageTitle.tsx b/client/src/features/page/components/PageTitle/PageTitle.tsx
@@ -11,7 +11,7 @@ export const PageTitle = ({ title, icon }: PageTitleProps) => {
   const { icon: IconComponent, color } = iconComponents[icon];
   return (
     <div className={pageTitleContainer}>
-      <IconComponent color={color} size="24px" />
+      <IconComponent color={color} size="24px" style={{ flexShrink: 0 }} />
       <p className={pageTitle}>{title || "Title"}</p>
     </div>
   );