busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): dynamically resizable TranslationPreview table for 100-10000 char texts

Browse Source 
- 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)
This commit is contained in:
busya
2026-05-15 10:40:57 +03:00
parent 70aec51e0b
commit e55f679262
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/lib/components/translate/TranslationPreview.svelte
View File

@@ -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