임동욱 임동욱 08-10
fix: 사이드바 라벨 줄바꿈 및 구분선 높이 수정
Co-Authored-By: Claude Opus 5 
@6292364c6ba290cbe338a83b9449062ae95b3b0e
components/ui/sidebar.tsx
--- components/ui/sidebar.tsx
+++ components/ui/sidebar.tsx
@@ -12,7 +12,12 @@
 export function Sidebar({ header, children, footer, className }: SidebarProps) {
   return (
     <aside
-      className={`flex h-full w-64 flex-col border-r border-border bg-surface ${className ?? ""}`}
+      // h-full(퍼센트 높이)을 쓰지 않는다 — 부모가 flex-grow로 산출한 높이는 CSS 퍼센트
+      // 해석의 기준(containing block)이 되지 못해 h-full이 auto로 무너질 수 있다. 대신
+      // 명시적 높이를 지정하지 않아(auto) 부모 flex 컨테이너의 기본 align-items:stretch가
+      // 그대로 적용되게 한다 — 이 방식은 부모 높이가 퍼센트든 flex-grow든 항상 안정적으로
+      // 동작한다.
+      className={`flex w-64 flex-col border-r border-border bg-surface ${className ?? ""}`}
     >
       {header && <div className="border-b border-border p-4">{header}</div>}
       <nav className="flex-1 overflow-y-auto p-2">{children}</nav>
Add a comment
List