From 9482ecbf36cc5c5a062a7547099b582a257c2a4d Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 9 Apr 2026 10:31:13 +0200
Subject: [PATCH] fix(planner): add truncation and title attribute to
 replacing-name span

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/planner/SwapSuggestionList.svelte  | 5 +++--
 frontend/src/lib/planner/SwapSuggestionList.test.ts | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/planner/SwapSuggestionList.svelte b/frontend/src/lib/planner/SwapSuggestionList.svelte
index d49210d..0049a93 100644
--- a/frontend/src/lib/planner/SwapSuggestionList.svelte
+++ b/frontend/src/lib/planner/SwapSuggestionList.svelte
@@ -43,9 +43,10 @@
 	</p>
 	<span
 		data-testid="replacing-name"
-		style="font-family: var(--font-display); font-size: 14px; text-decoration: line-through; opacity: 0.6; color: var(--color-text);"
+		title={replacingName}
+		style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 14px; text-decoration: line-through; opacity: 0.6; color: var(--color-text);"
 	>
-		{replacingName}{#if replacingMeta}<br />{replacingMeta}{/if}
+		{replacingName}{#if replacingMeta} · {replacingMeta}{/if}
 	</span>
 </div>
 
diff --git a/frontend/src/lib/planner/SwapSuggestionList.test.ts b/frontend/src/lib/planner/SwapSuggestionList.test.ts
index 1313db4..d8b3294 100644
--- a/frontend/src/lib/planner/SwapSuggestionList.test.ts
+++ b/frontend/src/lib/planner/SwapSuggestionList.test.ts
@@ -30,6 +30,12 @@ describe('SwapSuggestionList', () => {
 		expect(getComputedStyle(struck).textDecoration || struck.style.textDecoration).toContain('line-through');
 	});
 
+	it('replacing-name span has title attribute for full name', () => {
+		render(SwapSuggestionList, { props: baseProps });
+		const struck = screen.getByTestId('replacing-name');
+		expect(struck.getAttribute('title')).toBe('Tomato pasta');
+	});
+
 	it('renders the easiest-first eyebrow label', () => {
 		render(SwapSuggestionList, { props: baseProps });
 		expect(screen.getByText(/einfachste zuerst/i)).toBeTruthy();