From 8d05f623cb189c71d8c96f353b4893b5ec0ca13d Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 1 May 2026 23:42:08 -0400
Subject: [PATCH] feat(web): /discover scrolls only the results, not the chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructures the page as a full-height flex column so the persistent
chrome (DiscoverTabs, search input, facet tabs, header) stays anchored
at the top and only the result grid scrolls. Same treatment for the
empty-state SuggestionFeed.

Main retains overflow-y-auto for other pages, but with h-full + flex-col
+ min-h-0 on the inner scroll region this page contains its own
overflow and main's scroll never triggers — search field + facet tabs
remain visible while you browse results.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/routes/discover/+page.svelte | 57 +++++++++++++++++-----------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/web/src/routes/discover/+page.svelte b/web/src/routes/discover/+page.svelte
index d00badf6..cc751370 100644
--- a/web/src/routes/discover/+page.svelte
+++ b/web/src/routes/discover/+page.svelte
@@ -115,9 +115,16 @@
   ];
 </script>
 
-<DiscoverTabs />
+<!--
+  Page layout: a full-height flex column so the persistent chrome
+  (DiscoverTabs, search input, facet tabs) stays anchored at the top
+  while only the result grid scrolls. Main has overflow-y-auto, but
+  with h-full + flex-col + min-h-0 on the scroll region, this page
+  contains its own overflow and main's scroll never triggers.
+-->
+<div class="flex h-full flex-col gap-4">
+  <DiscoverTabs />
 
-<div class="space-y-6 pt-6">
   <input
     type="search"
     aria-label="Search Lidarr"
@@ -127,7 +134,9 @@
   />
 
   {#if debouncedQ === ''}
-    <SuggestionFeed />
+    <div class="min-h-0 flex-1 overflow-y-auto pb-4">
+      <SuggestionFeed />
+    </div>
   {:else}
     <header class="space-y-1">
       <h2 class="font-display text-2xl font-medium text-text-primary">
@@ -157,26 +166,28 @@
       </ul>
     </nav>
 
-    {#if query.isError}
-      <ApiErrorBanner error={query.error} onRetry={query.refetch} />
-    {:else if query.isPending}
-      <p class="text-text-secondary">Searching…</p>
-    {:else if results.length === 0}
-      <p class="text-text-secondary">Nothing to add for that search yet.</p>
-    {:else}
-      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-        {#each results as r (r.mbid)}
-          <DiscoverResultCard
-            kind={activeKind}
-            title={r.name}
-            subtitle={r.secondary_text}
-            imageUrl={r.image_url || undefined}
-            state={cardState(r)}
-            onRequest={() => handleRequestClick(r)}
-          />
-        {/each}
-      </div>
-    {/if}
+    <div class="min-h-0 flex-1 overflow-y-auto pb-4">
+      {#if query.isError}
+        <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+      {:else if query.isPending}
+        <p class="text-text-secondary">Searching…</p>
+      {:else if results.length === 0}
+        <p class="text-text-secondary">Nothing to add for that search yet.</p>
+      {:else}
+        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+          {#each results as r (r.mbid)}
+            <DiscoverResultCard
+              kind={activeKind}
+              title={r.name}
+              subtitle={r.secondary_text}
+              imageUrl={r.image_url || undefined}
+              state={cardState(r)}
+              onRequest={() => handleRequestClick(r)}
+            />
+          {/each}
+        </div>
+      {/if}
+    </div>
   {/if}
 </div>