Table now uses table-fixed to constrain long filenames/matches in ResultsList

This commit is contained in:
ponzischeme89
2026-01-18 01:14:10 +13:00
parent 96b45ed05e
commit 946fe6cbee
4 changed files with 13 additions and 51 deletions
+7 -7
View File
@@ -1106,7 +1106,7 @@
<!-- Table -->
<div class="rounded-lg border border-border bg-card overflow-hidden">
<div class="max-h-[650px] overflow-y-auto overflow-x-auto">
<Table className="w-full">
<Table className="w-full table-fixed">
<TableHeader className="sticky top-0 bg-muted/60 backdrop-blur border-b border-border">
<TableRow className="uppercase tracking-wider">
<TableHead className="w-12">
@@ -1119,13 +1119,13 @@
</TableHead>
<TableHead className="w-10"></TableHead>
<TableHead className="w-28">Status</TableHead>
<TableHead>Filename</TableHead>
<TableHead>Matched Result</TableHead>
<TableHead className="w-[38%]">Filename</TableHead>
<TableHead className="w-[28%]">Matched Result</TableHead>
<TableHead className="w-64 text-right"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#if loading}
{#if loading && files.length === 0}
{#each Array(6) as _}
<TableRow>
<TableCell className="w-12">
@@ -1190,7 +1190,7 @@
<TableCell className="w-28">
<StatusBadge status={file.status} />
</TableCell>
<TableCell>
<TableCell className="min-w-0">
<span
class="text-[13px] font-mono truncate block"
title={file.name}
@@ -1198,7 +1198,7 @@
{file.name}
</span>
</TableCell>
<TableCell>
<TableCell className="min-w-0">
<div class="flex items-center gap-2">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
@@ -1219,7 +1219,7 @@
<span class="text-[11px] text-blue-400"
>→ Matched:</span
>
<span class="text-[11px] text-blue-300"
<span class="text-[11px] text-blue-300 truncate block"
>{suggestedMatches[file.path]?.title || "Unknown"} ({suggestedMatches[
file.path
]?.year || "N/A"})</span
+1 -1
View File
@@ -751,7 +751,7 @@
tmdb: tmdbEnabled,
tvmaze: tvmazeEnabled,
}}
loading={scanning || processing}
loading={processing}
on:processSingle={handleProcessSingle}
on:processBulk={handleProcessBulk}
on:metadataSourceChange={handleMetadataSourceChange}
@@ -35,43 +35,7 @@
<form on:submit|preventDefault={handleSubmit} class="space-y-8">
<div>
<div class="rounded-xl border border-red-500/30 bg-red-500/5 p-6 space-y-4 mb-6">
<div>
<h3 class="text-sm font-semibold text-red-200">Support Sublogue ❤️</h3>
<p class="text-[12px] text-red-200/70">
Matt is a single developer of Sublogue and Shelfarr — your support and stars on GitHub help me keep going.
</p>
</div>
<div class="flex flex-wrap gap-3">
<button type="button" class="flex-1 min-w-[220px] px-4 py-3 rounded-xl text-[12px] font-medium border border-red-500/30 bg-bg-card/70 text-text-secondary hover:text-red-100 hover:bg-red-500/10 hover:border-red-500/60 transition-all">
<div class="text-[13px] font-semibold text-text-primary">Buy me coffee</div>
<div class="text-[11px] text-text-tertiary">Small tip · $4.99</div>
</button>
<button type="button" class="flex-1 min-w-[220px] px-4 py-3 rounded-xl text-[12px] font-medium border border-red-500/30 bg-bg-card/70 text-text-secondary hover:text-red-100 hover:bg-red-500/10 hover:border-red-500/60 transition-all">
<div class="text-[13px] font-semibold text-text-primary">Buy me lunch</div>
<div class="text-[11px] text-text-tertiary">Medium tip · $9.99</div>
</button>
<button type="button" class="flex-1 min-w-[220px] px-4 py-3 rounded-xl text-[12px] font-medium border border-red-500/30 bg-bg-card/70 text-text-secondary hover:text-red-100 hover:bg-red-500/10 hover:border-red-500/60 transition-all">
<div class="text-[13px] font-semibold text-text-primary">Buy me dinner</div>
<div class="text-[11px] text-text-tertiary">Large tip · $19.99</div>
</button>
</div>
<div class="flex items-center justify-between">
<p class="text-[11px] text-text-tertiary">
Every bit keeps Sublogue shipping.
</p>
<a
href="https://www.buymeacoffee.com/sublogue"
target="_blank"
rel="noopener noreferrer"
class="px-4 py-2 rounded-lg border border-red-500/30 text-[12px] text-text-secondary hover:text-white hover:bg-bg-hover transition-all"
>
Donate
</a>
</div>
</div>
<h2 class="text-lg font-semibold text-text-primary">General Settings</h2>
<h2 class="text-lg font-semibold text-text-primary">General Settings</h2>
<p class="text-[13px] text-text-secondary mb-6">
Control how scans run and where summaries are placed.
</p>