From 306ae711ab25764c042df5376449c2aa12414ebb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 19 Dec 2025 16:40:01 -0800
Subject: [PATCH] fix: collection filter background color

---
 .../collection/CollectionFilters.svelte          | 16 +++++++++++-----
 .../database/DatabaseGridWithProvider.svelte     |  1 +
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/collection/CollectionFilters.svelte b/src/lib/components/collection/CollectionFilters.svelte
index c29be46f..0294bc89 100644
--- a/src/lib/components/collection/CollectionFilters.svelte
+++ b/src/lib/components/collection/CollectionFilters.svelte
@@ -48,6 +48,8 @@
 		element?: string
 		/** Use neutral gray styling for view toggle */
 		neutralViewToggle?: boolean
+		/** Whether to show contained background styling (default: true) */
+		contained?: boolean
 	}
 
 	export interface CollectionFilterState {
@@ -110,7 +112,8 @@
 		onViewModeChange,
 		showViewToggle = false,
 		element,
-		neutralViewToggle = false
+		neutralViewToggle = false,
+		contained = true
 	}: Props = $props()
 
 	// Compute effective filter visibility (explicit showFilters overrides entityType defaults)
@@ -287,7 +290,7 @@
 	)
 </script>
 
-<div class="filters-container">
+<div class="filters-container" class:contained>
 	<div class="filters">
 		{#if effectiveShowFilters.element}
 			<MultiSelect
@@ -393,10 +396,13 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: $unit-2x;
-		padding: $unit;
-		background: var(--button-contained-bg);
-		border-radius: $card-corner;
 		width: 100%;
+
+		&.contained {
+			padding: $unit;
+			background: var(--button-contained-bg);
+			border-radius: $card-corner;
+		}
 	}
 
 	.filters {
diff --git a/src/lib/components/database/DatabaseGridWithProvider.svelte b/src/lib/components/database/DatabaseGridWithProvider.svelte
index fe216cbb..204d3533 100644
--- a/src/lib/components/database/DatabaseGridWithProvider.svelte
+++ b/src/lib/components/database/DatabaseGridWithProvider.svelte
@@ -233,6 +233,7 @@
 			bind:seasonFilters
 			onFiltersChange={handleFiltersChange}
 			showSort={false}
+			contained={false}
 		/>
 
 		<div class="controls-right">