From e55f67926215cf4b41ac8187450f37959dad8245 Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Fri, 15 May 2026 10:40:57 +0300
Subject: [PATCH] fix(ui): dynamically resizable TranslationPreview table for
 100-10000 char texts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed max-w-[200px] compression on source text column → now
  gets proportional space
- Scrollable containers (max-h-32 overflow-y-auto) for long text cells
- Language columns: min-w-[200px]→[250px] with whitespace-pre-wrap
- Source language badge and status columns remain narrow (w-28, w-24)
---
 .../translate/TranslationPreview.svelte          | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/translate/TranslationPreview.svelte b/frontend/src/lib/components/translate/TranslationPreview.svelte
index 4e47722d..fd17a62d 100644
--- a/frontend/src/lib/components/translate/TranslationPreview.svelte
+++ b/frontend/src/lib/components/translate/TranslationPreview.svelte
@@ -365,7 +365,7 @@
 						<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">{$t.translate?.preview?.table_source}</th>
 						<th class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase w-28">{$t.translate?.preview?.detected_language}</th>
 						{#each targetLanguages as lang}
-							<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase min-w-[180px]">
+							<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase min-w-[250px]">
 								<div class="flex items-center gap-1">
 									<span class="font-mono text-blue-600">{lang}</span>
 								</div>
@@ -378,8 +378,10 @@
 					{#each records as row, idx}
 						<tr class="{row.status === 'REJECTED' ? 'bg-red-50' : row._isEdited ? 'bg-yellow-50' : idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}">
 							<td class="px-3 py-2 text-xs text-gray-400 align-top">{idx + 1}</td>
-							<td class="px-3 py-2 align-top max-w-[200px]">
-								<code class="text-xs text-gray-800 break-all">{row.source_sql || $t.translate?.preview?.empty_placeholder}</code>
+							<td class="px-3 py-2 align-top min-w-[200px]">
+								<div class="max-h-32 overflow-y-auto">
+									<code class="text-xs text-gray-800 whitespace-pre-wrap break-all">{row.source_sql || $t.translate?.preview?.empty_placeholder}</code>
+								</div>
 							</td>
 							<td class="px-3 py-2 text-center align-top">
 							<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full font-mono
@@ -417,9 +419,11 @@
 											</button>
 										</div>
 									{:else}
-										<code class="text-xs break-all {langStatus === 'edited' ? 'text-yellow-800' : langStatus === 'approved' ? 'text-green-700' : 'text-gray-700'}">
-											{langVal || $t.translate?.preview?.pending_placeholder}
-										</code>
+										<div class="max-h-32 overflow-y-auto">
+											<code class="text-xs whitespace-pre-wrap break-all {langStatus === 'edited' ? 'text-yellow-800' : langStatus === 'approved' ? 'text-green-700' : 'text-gray-700'}">
+												{langVal || $t.translate?.preview?.pending_placeholder}
+											</code>
+										</div>
 										<div class="flex gap-1 mt-1 flex-wrap">
 											{#if langStatus !== 'approved' && langStatus !== 'edited'}
 												<button