From c19c0ea107a2a6c65e1d45efb61dc26c7843246f Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 23 Feb 2026 17:42:50 +0000
Subject: [PATCH]  truncate long summary and path in SummaryPathDisplay (#8062)

* fix: truncate long summary and path in SummaryPathDisplay

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: allow summary to shrink in flow editor top bar

Add min-w-0 to the SummaryPathDisplay wrapper in FlowBuilder so flex
shrinking works. Remove max-w cap on the wrapper so the summary can use
all available space. Remove w-full and max-w-md from the empty middle
schedule div that was stealing space even when empty.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/lib/components/FlowBuilder.svelte              | 4 ++--
 frontend/src/lib/components/SummaryPathDisplay.svelte       | 5 +++--
 frontend/src/lib/components/details/DetailPageHeader.svelte | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index a7e3d22e84..35dda2ed84 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -1115,7 +1115,7 @@
 			<div
 				class="justify-between flex flex-row items-center pl-2 pr-4 space-x-4 scrollbar-hidden overflow-x-auto max-h-12 h-full relative"
 			>
-				<div class="flex w-full max-w-md gap-8 items-center">
+				<div class="flex w-full gap-8 items-center min-w-0">
 					<SummaryPathDisplay
 						bind:summary={flowStore.val.summary}
 						bind:path={$pathStore}
@@ -1124,7 +1124,7 @@
 					/>
 				</div>
 
-				<div class="gap-4 flex-row hidden md:flex w-full whitespace-nowrap max-w-md">
+				<div class="gap-4 flex-row hidden md:flex whitespace-nowrap">
 					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
 						{@const primaryScheduleIndex = triggersState.triggers.findIndex((t) => t.isPrimary)}
 						{@const scheduleIndex = triggersState.triggers.findIndex((t) => t.type === 'schedule')}
diff --git a/frontend/src/lib/components/SummaryPathDisplay.svelte b/frontend/src/lib/components/SummaryPathDisplay.svelte
index deea9d7be8..0efe9fe025 100644
--- a/frontend/src/lib/components/SummaryPathDisplay.svelte
+++ b/frontend/src/lib/components/SummaryPathDisplay.svelte
@@ -71,6 +71,7 @@
 
 {#if editable || onSaved}
 	<Popover
+		class="min-w-0 max-w-full"
 		placement="bottom-start"
 		contentClasses="p-4"
 		usePointerDownOutside
@@ -84,7 +85,7 @@
 	>
 		{#snippet trigger()}
 			<div
-				class={'min-w-24 truncate flex flex-col items-start px-2 py-1 rounded-md  transition-colors cursor-pointer hover:bg-surface-hover'}
+				class={'min-w-0 truncate flex flex-col items-start px-2 py-1 rounded-md transition-colors cursor-pointer hover:bg-surface-hover'}
 			>
 				<span class="text-2xs leading-tight text-tertiary font-mono font-normal truncate max-w-full"
 					>{path}</span
@@ -184,7 +185,7 @@
 		{/snippet}
 	</Popover>
 {:else}
-	<div class="min-w-24 truncate flex flex-col px-2">
+	<div class="min-w-0 truncate flex flex-col px-2">
 		{#if !emptyString(summary)}
 			<span class="text-[10px] leading-tight text-tertiary font-mono truncate">{path}</span>
 		{/if}
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index 7b63fb9ddf..cc162961ce 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -63,7 +63,7 @@
 			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-12"
 		>
 			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
-				<div class={twMerge($userStore?.operator ? 'pl-10' : '')}>
+				<div class={twMerge('min-w-0', $userStore?.operator ? 'pl-10' : '')}>
 					<SummaryPathDisplay {summary} {path} {onSaved} kind={errorHandlerKind} />
 				</div>
 				{#if tag}