From 8e18c15593a69ed9b6cdd9e4ade2f62c5f1ff346 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 2 Jan 2026 22:03:27 +0100
Subject: [PATCH] fix: restore vertical filter layout on mobile and enhance
 dropdown shadows

Fixed CSS specificity issue where filter-panel classes were preventing vertical stacking on small screens. Also added drop-shadow to all filter dropdowns for improved visual depth.
---
 src/lib/components/CategoryFilter.svelte | 1 +
 src/lib/components/FilterPanel.svelte    | 3 ++-
 src/lib/components/IconFilter.svelte     | 1 +
 src/lib/components/SeasonFilter.svelte   | 1 +
 src/lib/components/TagFilter.svelte      | 1 +
 5 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/CategoryFilter.svelte b/src/lib/components/CategoryFilter.svelte
index 135a0b38..4e29adbb 100644
--- a/src/lib/components/CategoryFilter.svelte
+++ b/src/lib/components/CategoryFilter.svelte
@@ -142,6 +142,7 @@
 		background: var(--nord0);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
 		max-height: 200px;
 		overflow-y: auto;
 		z-index: 100;
diff --git a/src/lib/components/FilterPanel.svelte b/src/lib/components/FilterPanel.svelte
index b4a49fe6..f2de704b 100644
--- a/src/lib/components/FilterPanel.svelte
+++ b/src/lib/components/FilterPanel.svelte
@@ -96,7 +96,8 @@
 			display: flex;
 		}
 
-		.filter-panel {
+		.filter-panel.with-favorites,
+		.filter-panel.without-favorites {
 			grid-template-columns: 1fr;
 			gap: 1rem;
 			max-width: 600px;
diff --git a/src/lib/components/IconFilter.svelte b/src/lib/components/IconFilter.svelte
index ac40244e..ce86b23a 100644
--- a/src/lib/components/IconFilter.svelte
+++ b/src/lib/components/IconFilter.svelte
@@ -134,6 +134,7 @@
 		background: var(--nord0);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
 		max-height: 200px;
 		overflow-y: auto;
 		z-index: 100;
diff --git a/src/lib/components/SeasonFilter.svelte b/src/lib/components/SeasonFilter.svelte
index e8520e7e..a73d35d4 100644
--- a/src/lib/components/SeasonFilter.svelte
+++ b/src/lib/components/SeasonFilter.svelte
@@ -154,6 +154,7 @@
 		background: var(--nord0);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
 		max-height: 200px;
 		overflow-y: auto;
 		z-index: 100;
diff --git a/src/lib/components/TagFilter.svelte b/src/lib/components/TagFilter.svelte
index 268ebd7b..ef08a261 100644
--- a/src/lib/components/TagFilter.svelte
+++ b/src/lib/components/TagFilter.svelte
@@ -151,6 +151,7 @@
 		background: var(--nord0);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
 		max-height: 200px;
 		overflow-y: auto;
 		z-index: 100;