From 4899e6301fd6811f42f7b2579d11340931f85371 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 29 Mar 2026 15:07:59 +0200
Subject: [PATCH] fix(notifications): use bg-canvas on list so items match page
 background

The <ul> had bg-surface (white), causing unread rows to inherit white
instead of blending with the canvas background. Read rows already set
bg-canvas explicitly, so they looked fine. Unread rows were white.

Fix: set bg-canvas on the <ul> so all rows inherit the page background.
The redundant explicit bg-canvas on read rows is removed.
Unread items remain visually distinct via the left accent border + dot only.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/notifications/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/notifications/+page.svelte b/frontend/src/routes/notifications/+page.svelte
index d073bc31..05f49425 100644
--- a/frontend/src/routes/notifications/+page.svelte
+++ b/frontend/src/routes/notifications/+page.svelte
@@ -202,7 +202,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 		{:else}
 			<ul
 				role="list"
-				class="divide-y divide-line rounded-sm border border-line bg-surface shadow-sm"
+				class="divide-y divide-line rounded-sm border border-line bg-canvas shadow-sm"
 			>
 				{#each allNotifications as n (n.id)}
 					<li class="relative">
@@ -213,7 +213,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 								'flex min-h-14 flex-col justify-center border-l-[3px] px-4 py-4 md:px-6 md:py-5',
 								'transition-colors hover:bg-accent-bg',
 								n.read
-									? 'border-l-transparent bg-canvas'
+									? 'border-l-transparent'
 									: 'border-l-accent'
 							].join(' ')}
 							aria-label={m.notification_row_aria({