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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user