From 9449773cff7526961910f7c2ffddbf3026cd6546 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 17 Oct 2025 16:17:34 +0200
Subject: [PATCH 1/2] Make collection filter sticky

---
 src/components/ViewCollection.vue   | 50 +++++++++++++++--------------
 src/styles/sections/collection.scss | 19 ++++++-----
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/ViewCollection.vue b/src/components/ViewCollection.vue
index 2818fab0..d554319f 100644
--- a/src/components/ViewCollection.vue
+++ b/src/components/ViewCollection.vue
@@ -22,32 +22,34 @@ export default {
 		class="tify-collection"
 		tabindex="0"
 	>
-		<h2 class="tify-sr-only">
-			{{ $translate('Collection') }}
-		</h2>
+		<header class="tify-collection-header">
+			<h2 class="tify-sr-only">
+				{{ $translate('Collection') }}
+			</h2>
 
-		<p
-			v-if="$store.collection.items.length > 5"
-			class="tify-collection-controls"
-		>
-			<input
-				v-model="filter"
-				:aria-label="$translate('Filter collection')"
-				class="tify-collection-filter"
-				:placeholder="$translate('Filter collection')"
-				type="text"
-				@keydown.esc.prevent="filter ? (filter = '') : $event.target.blur()"
-				@keydown.stop
-			/>
-			<button
-				type="button"
-				class="tify-collection-reset"
-				:disabled="!filter"
-				@click="filter = ''"
+			<div
+				v-if="$store.collection.items.length > 5"
+				class="tify-collection-controls"
 			>
-				{{ $translate('Reset') }}
-			</button>
-		</p>
+				<input
+					v-model="filter"
+					:aria-label="$translate('Filter collection')"
+					class="tify-collection-filter"
+					:placeholder="$translate('Filter collection')"
+					type="text"
+					@keydown.esc.prevent="filter ? (filter = '') : $event.target.blur()"
+					@keydown.stop
+				/>
+				<button
+					type="button"
+					class="tify-collection-reset"
+					:disabled="!filter"
+					@click="filter = ''"
+				>
+					{{ $translate('Reset') }}
+				</button>
+			</div>
+		</header>
 
 		<ol
 			v-if="filteredItems.length"
diff --git a/src/styles/sections/collection.scss b/src/styles/sections/collection.scss
index eccda77c..cca8c774 100644
--- a/src/styles/sections/collection.scss
+++ b/src/styles/sections/collection.scss
@@ -6,17 +6,10 @@
 
 .tify-collection-controls {
 	display: flex;
-
-	> :first-child {
-		border-radius: $br 0 0 $br;
-	}
-
-	> :last-child {
-		border-radius: 0 $br $br 0;
-	}
 }
 
 .tify-collection-filter {
+	border-radius: $br 0 0 $br;
 	flex: 1;
 	max-width: 36em;
 
@@ -25,6 +18,15 @@
 	}
 }
 
+.tify-collection-header {
+	backdrop-filter: $blur;
+	background: oklch(from $panel-bg l c h / 61.8%);
+	margin: g(-.5) g(-.5) 0;
+	padding: g(.5);
+	position: sticky;
+	top: g(-.5);
+}
+
 .tify-collection-list {
 	list-style: none;
 	margin: 0;
@@ -71,5 +73,6 @@
 
 .tify-collection-reset {
 	@extend %button-small;
+	border-radius: 0 $br $br 0;
 	margin-left: -1px;
 }

From 6bcc2422ec96a2da2b836cf5f52ad9affe429620 Mon Sep 17 00:00:00 2001
From: t11r <1674104+t11r@users.noreply.github.com>
Date: Fri, 17 Oct 2025 16:18:01 +0200
Subject: [PATCH 2/2] Improve margins around provider logo

---
 src/styles/sections/info.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/sections/info.scss b/src/styles/sections/info.scss
index fb170c5f..0724839b 100644
--- a/src/styles/sections/info.scss
+++ b/src/styles/sections/info.scss
@@ -73,8 +73,8 @@ $info-content-max-height: g(6.75);
 		// Ensure visibility in dark mode since most logos require a white background
 		background: $panel-bg;
 		color-scheme: light;
-		margin: g(-.5);
-		padding: g(.5);
+		margin: g(-.25) g(-.5) g(-1);
+		padding: g(.25) g(.75);
 
 		> :last-child {
 			margin: 0;