From 33ce4292cacccc189955ebb35e3324fa0d1b5b08 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 13 Apr 2026 15:54:58 +0900
Subject: [PATCH] fix(frontend): add min-w-0 to flex chain for mobile card
 overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

flex 체인에서 min-width: auto 기본값이 카드 shrink를 막아
모바일에서 콘텐츠가 뷰포트를 초과하던 문제 수정.
- +page.svelte line 418: flex-1 → flex-1 min-w-0
- +page.svelte line 693: overflow-x-hidden 추가
- DocumentCard.svelte: button에 min-w-0 추가

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/DocumentCard.svelte | 2 +-
 frontend/src/routes/documents/+page.svelte      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/DocumentCard.svelte b/frontend/src/lib/components/DocumentCard.svelte
index 4afd64b..36b111a 100644
--- a/frontend/src/lib/components/DocumentCard.svelte
+++ b/frontend/src/lib/components/DocumentCard.svelte
@@ -98,7 +98,7 @@
     type="button"
     onclick={handleClick}
     aria-label={doc.title || '문서 선택'}
-    class="flex items-stretch w-full text-left"
+    class="flex items-stretch w-full min-w-0 text-left"
   >
   <!-- domain 색상 바 -->
   <div class="w-1 shrink-0 rounded-l-lg" style="background: {domainColor}"></div>
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index ea42fca..7f9e45c 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -415,7 +415,7 @@
 
 <div class="flex h-full">
   <!-- 가운데: 기존 list + viewer 세로 split (변경 없음) -->
-  <div class="flex-1 flex flex-col min-h-0">
+  <div class="flex-1 min-w-0 flex flex-col min-h-0">
   <!-- 상단 영역 -->
   <div class="{selectedDoc ? 'h-[30%] shrink-0 border-b border-[var(--border)]' : 'flex-1'} flex flex-col min-h-0">
     <!-- 업로드 드롭존 -->
@@ -690,7 +690,7 @@
     {/if}
 
     <!-- 스크롤 영역 (목록) -->
-    <div class="flex-1 overflow-y-auto px-4">
+    <div class="flex-1 overflow-y-auto overflow-x-hidden px-4">
     <!-- 결과 헤더 — 카운트만. 필터는 위의 칩 row가 표시. -->
     {#if !loading}
       <div class="flex items-center mb-2">