From d6b3d3c88b251b5fd286d7dba32ebe6168ee8c61 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Sat, 18 Jul 2026 08:20:40 +0200
Subject: [PATCH] fix(web): relation rows wrap and break layout on long node
 names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The clickable-button variant of relationRow was missing the truncate
class that the read-only span fallback already had — long slugs (task
UUIDs, exec IDs) rendered at their full pre-truncated length inside a
shrink-only flex item, overflowing the narrow detail sidebar and
wrapping to extra lines. Give both sides flex-1 + truncate so they
share the row's width evenly and always stay on one line.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/lib/components/EntityDetailContent.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/EntityDetailContent.svelte b/web/src/lib/components/EntityDetailContent.svelte
index ecb399c..6aa5464 100644
--- a/web/src/lib/components/EntityDetailContent.svelte
+++ b/web/src/lib/components/EntityDetailContent.svelte
@@ -390,13 +390,13 @@
     {#snippet relationRow(rel: Relationship)}
       <div class="flex min-w-0 items-center gap-1 font-mono text-xs">
         {#if onSelectEntity}
-          <button type="button" class="min-w-0 shrink hover:underline hover:text-foreground" title={rel.source} onclick={() => onSelectEntity(rel.source)}>{truncateMiddle(rel.source)}</button>
+          <button type="button" class="min-w-0 flex-1 truncate text-left hover:underline hover:text-foreground" title={rel.source} onclick={() => onSelectEntity(rel.source)}>{truncateMiddle(rel.source)}</button>
           <span class="shrink-0 text-muted-foreground">—{rel.type}→</span>
-          <button type="button" class="min-w-0 shrink hover:underline hover:text-foreground" title={rel.target} onclick={() => onSelectEntity(rel.target)}>{truncateMiddle(rel.target)}</button>
+          <button type="button" class="min-w-0 flex-1 truncate text-left hover:underline hover:text-foreground" title={rel.target} onclick={() => onSelectEntity(rel.target)}>{truncateMiddle(rel.target)}</button>
         {:else}
-          <span class="min-w-0 shrink truncate" title={rel.source}>{truncateMiddle(rel.source)}</span>
+          <span class="min-w-0 flex-1 truncate" title={rel.source}>{truncateMiddle(rel.source)}</span>
           <span class="shrink-0 text-muted-foreground">—{rel.type}→</span>
-          <span class="min-w-0 shrink truncate" title={rel.target}>{truncateMiddle(rel.target)}</span>
+          <span class="min-w-0 flex-1 truncate" title={rel.target}>{truncateMiddle(rel.target)}</span>
         {/if}
       </div>
     {/snippet}