From a3580c6fa72ca9039db829b29ada3decb3731276 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 19 Aug 2026 22:07:36 +0200
Subject: [PATCH] web/components/notifications: improve hover states in dark &
 light mode

Signed-off-by: eti <eti@eti.tf>
---
 web/src/app.css                                             | 4 ++--
 .../lib/components/notifications/NotificationItem.svelte    | 4 ++--
 .../lib/components/notifications/NotificationList.svelte    | 6 +++++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index f7bd0b2e0..94baea7e1 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -414,8 +414,8 @@
 			--color-background-warning-subtle: #78350f;
 			--color-background-warning-subtle-hover: #92400e;
 			--color-background-warning-emphasis: #d97706;
-			--color-background-info-subtle: #312e81;
-			--color-background-info-subtle-hover: #3730a3;
+			--color-background-info-subtle: #1e1b4b;
+			--color-background-info-subtle-hover: #312e81;
 			--color-background-info-emphasis: #4f46e5;
 			--color-background-emphasis: #f3f4f6;
 
diff --git a/web/src/lib/components/notifications/NotificationItem.svelte b/web/src/lib/components/notifications/NotificationItem.svelte
index 6bb0005a4..ec6ba37de 100644
--- a/web/src/lib/components/notifications/NotificationItem.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.svelte
@@ -6,7 +6,7 @@
 			// the row subscribes to NotificationList's columns, so every row shares one
 			// lead column width and the descriptions line up down the whole list. it
 			// only lays out correctly inside that grid.
-			root: "group/notification col-span-full grid grid-cols-subgrid items-center gap-y-1 px-2 py-4 no-underline transition-colors hover:no-underline md:px-4",
+			root: "group/notification col-span-full grid grid-cols-subgrid items-center gap-y-1 px-2 py-4 no-underline transition-colors hover:border-border-disabled hover:no-underline md:px-4",
 			icon: "row-start-1 size-3.5 shrink-0",
 			header: "row-start-1 flex min-w-0 items-center gap-1.5 overflow-hidden typography-paragraph-small",
 			phrase: "truncate text-foreground-muted",
@@ -20,7 +20,7 @@
 		variants: {
 			read: {
 				true: { root: "bg-background-default hover:bg-background-subtle" },
-				false: { root: "bg-background-info-subtle hover:bg-background-info-subtle-hover" }
+				false: { root: "bg-background-info-subtle hover:bg-background-info-subtle-hover dark:hover:bg-background-subtle" }
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/notifications/NotificationList.svelte b/web/src/lib/components/notifications/NotificationList.svelte
index b63a92d59..bd425f2fa 100644
--- a/web/src/lib/components/notifications/NotificationList.svelte
+++ b/web/src/lib/components/notifications/NotificationList.svelte
@@ -47,9 +47,13 @@
 	the list owns the columns and every row subscribes to them with subgrid, so the
 	lead column measures the widest issue number in the whole list rather than the
 	one number in its own row.
+
+	divide-y hangs the separator off the bottom of each child, so the line above a
+	row belongs to the row before it. a hovered row has to reach back one sibling to
+	recolor that line, and the rows are the only links in here.
 -->
 <div
-	class="grid h-fit grid-cols-[auto_1fr_auto] content-start gap-x-4 divide-y divide-border-default overflow-hidden {border
+	class="grid h-fit grid-cols-[auto_1fr_auto] content-start gap-x-4 divide-y divide-border-default overflow-hidden pointer-fine:[&>*:has(+a:hover)]:border-border-disabled {border
 		? 'rounded-sm border border-border-default'
 		: ''}"
 >
-- 
2.51.2