From 0d5d1fe10df2b4a19d7cbb3ded11097fa69a7250 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Wed, 13 May 2026 08:08:58 +0900
Subject: [PATCH] =?UTF-8?q?fix(=EB=B0=98=EC=9D=91=ED=98=95):=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20width=20=EC=97=90=EC=84=9C=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=B7=B0=20+=20=EC=9D=B4=EB=A0=A5=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=88=84=EB=9D=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ResponsiveDataView: 모바일 카드 뷰 (lg 미만) + 카드 스켈레톤에 scrollContainer 모드의 max-h + overflow-y-auto 적용. 데스크톱 테이블만 적용돼 있던 누락 픽스
- TableHistoryModal: timeline/detail 탭의 ScrollArea 고정 h-[500px] → 모바일 h-[300px] sm:h-[500px] 적응형. DialogContent max-h-[90vh] 와 충돌 방지

증상: 브라우저 width 좁아질 때 카드 그리드/이력 타임라인이 viewport 너머로 잘리고 스크롤 안 됨.
---
 frontend/components/common/ResponsiveDataView.tsx | 4 ++++
 frontend/components/common/TableHistoryModal.tsx  | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/components/common/ResponsiveDataView.tsx b/frontend/components/common/ResponsiveDataView.tsx
index f28eb355..6732fec8 100644
--- a/frontend/components/common/ResponsiveDataView.tsx
+++ b/frontend/components/common/ResponsiveDataView.tsx
@@ -166,6 +166,7 @@ export function ResponsiveDataView<T>({
         <div
           className={cn(
             "grid gap-4 sm:grid-cols-2 lg:hidden",
+            scrollContainer && "max-h-[calc(100vh-280px)] overflow-y-auto",
             cardContainerClassName
           )}
         >
@@ -286,6 +287,9 @@ export function ResponsiveDataView<T>({
       <div
         className={cn(
           "grid gap-4 sm:grid-cols-2 lg:hidden",
+          // scrollContainer 모드: 카드 뷰도 자체 세로 스크롤. 부모가 overflow-hidden 이라
+          // 별도 height 제약 없으면 카드들이 잘려 보임. 데스크톱 테이블과 동일 viewport 기준.
+          scrollContainer && "max-h-[calc(100vh-280px)] overflow-y-auto",
           cardContainerClassName
         )}
       >
diff --git a/frontend/components/common/TableHistoryModal.tsx b/frontend/components/common/TableHistoryModal.tsx
index a08fff3d..8446f94c 100644
--- a/frontend/components/common/TableHistoryModal.tsx
+++ b/frontend/components/common/TableHistoryModal.tsx
@@ -292,7 +292,7 @@ export function TableHistoryModal({
 
             {/* 타임라인 뷰 */}
             <TabsContent value="timeline">
-              <ScrollArea className="h-[500px] w-full rounded-md border p-4">
+              <ScrollArea className="h-[300px] w-full rounded-md border p-4 sm:h-[500px]">
                 {timeline.length === 0 ? (
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Clock className="text-muted-foreground mb-2 h-12 w-12" />
@@ -347,7 +347,7 @@ export function TableHistoryModal({
 
             {/* 상세 내역 뷰 */}
             <TabsContent value="detail">
-              <ScrollArea className="h-[500px] w-full rounded-md border">
+              <ScrollArea className="h-[300px] w-full rounded-md border sm:h-[500px]">
                 {detailRecords.length === 0 ? (
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <FileEdit className="text-muted-foreground mb-2 h-12 w-12" />