feat(web): /discover scrolls only the results, not the chrome

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>
This commit is contained in:
2026-05-01 23:42:08 -04:00
parent ab8235dd0b
commit 8d05f623cb
+34 -23
View File
@@ -115,9 +115,16 @@
]; ];
</script> </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 <input
type="search" type="search"
aria-label="Search Lidarr" aria-label="Search Lidarr"
@@ -127,7 +134,9 @@
/> />
{#if debouncedQ === ''} {#if debouncedQ === ''}
<SuggestionFeed /> <div class="min-h-0 flex-1 overflow-y-auto pb-4">
<SuggestionFeed />
</div>
{:else} {:else}
<header class="space-y-1"> <header class="space-y-1">
<h2 class="font-display text-2xl font-medium text-text-primary"> <h2 class="font-display text-2xl font-medium text-text-primary">
@@ -157,26 +166,28 @@
</ul> </ul>
</nav> </nav>
{#if query.isError} <div class="min-h-0 flex-1 overflow-y-auto pb-4">
<ApiErrorBanner error={query.error} onRetry={query.refetch} /> {#if query.isError}
{:else if query.isPending} <ApiErrorBanner error={query.error} onRetry={query.refetch} />
<p class="text-text-secondary">Searching…</p> {:else if query.isPending}
{:else if results.length === 0} <p class="text-text-secondary">Searching…</p>
<p class="text-text-secondary">Nothing to add for that search yet.</p> {:else if results.length === 0}
{:else} <p class="text-text-secondary">Nothing to add for that search yet.</p>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"> {:else}
{#each results as r (r.mbid)} <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
<DiscoverResultCard {#each results as r (r.mbid)}
kind={activeKind} <DiscoverResultCard
title={r.name} kind={activeKind}
subtitle={r.secondary_text} title={r.name}
imageUrl={r.image_url || undefined} subtitle={r.secondary_text}
state={cardState(r)} imageUrl={r.image_url || undefined}
onRequest={() => handleRequestClick(r)} state={cardState(r)}
/> onRequest={() => handleRequestClick(r)}
{/each} />
</div> {/each}
{/if} </div>
{/if}
</div>
{/if} {/if}
</div> </div>