Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore vertical filter layout on mobile and enhance dropdown shadows
Some checks failed
CI / update (push) Failing after 1m10s
Details

Browse Source 
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.
This commit is contained in:
Alexander Bocken
2026-01-02 22:03:27 +01:00
parent 1cec74fc78
commit 9e0e16aa68
5 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/components/CategoryFilter.svelte
View File

@@ -142,6 +142,7 @@
background: var(--nord0); background: var(--nord0);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 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; max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;

3
src/lib/components/FilterPanel.svelte
View File

@@ -96,7 +96,8 @@
display: flex; display: flex;
} }
.filter-panel { .filter-panel.with-favorites,
.filter-panel.without-favorites {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 1rem; gap: 1rem;
max-width: 600px; max-width: 600px;

1
src/lib/components/IconFilter.svelte
View File

@@ -134,6 +134,7 @@
background: var(--nord0); background: var(--nord0);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 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; max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;

1
src/lib/components/SeasonFilter.svelte
View File

@@ -154,6 +154,7 @@
background: var(--nord0); background: var(--nord0);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 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; max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;

1
src/lib/components/TagFilter.svelte
View File

@@ -151,6 +151,7 @@
background: var(--nord0); background: var(--nord0);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 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; max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;