From c569ae7dbfe3d72858109b3988615bc50d4b5ff2 Mon Sep 17 00:00:00 2001
From: Lars Nolden <me@larsnolden.com>
Date: Mon, 14 Sep 2026 12:05:16 +0200
Subject: [PATCH] Keep the armed combobox row visible while scrolling

The dropdown caps at 264px and a category registry easily exceeds it;
arrow navigation now scrolls the armed row into view with
block: nearest so the list follows the keyboard in both directions.
---
 web/src/ui.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/src/ui.tsx b/web/src/ui.tsx
index fc86a82..29488be 100644
--- a/web/src/ui.tsx
+++ b/web/src/ui.tsx
@@ -158,6 +158,14 @@ export function Combobox({
     create && filter && !exact && !disabled ? create(query.trim()) : [];
   const total = shown.length + creations.length;
   const cursor = active < total ? active : -1;
+  // The dropdown scrolls at 264px; keep the armed row visible while
+  // arrowing through a long category list.
+  useEffect(() => {
+    if (cursor < 0) return;
+    document
+      .getElementById(`${listID}-${cursor}`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [cursor, listID]);
   const pick = (v: string) => {
     onChange(v);
     setOpen(false);