From 19c686c57650b5380446aae3a758173525ff04ef Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 15 Oct 2025 01:43:26 +1300
Subject: [PATCH] Minor improvements to playlist

---
 .../src/routes/(app)/playlist/[slug]/+page.svelte         | 4 +---
 materialious/src/routes/(app)/watch/[slug]/+page.svelte   | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
index 05c4b9ae..2c7fe5be 100644
--- a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
@@ -10,9 +10,7 @@
 	let { data } = $props();
 </script>
 
-<div class="space"></div>
-
-<article>
+<article class="border padding">
 	{#if data.playlist.videos}
 		<nav>
 			<a
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index ff185faf..c61d3bff 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -491,9 +491,9 @@
 				<article
 					style="height: 85vh; position: relative;scrollbar-width: none;"
 					id="playlist"
-					class="scroll no-padding surface-container-high"
+					class="scroll no-padding surface-container border"
 				>
-					<article class="no-elevate" style="position: sticky; top: 0; z-index: 3;">
+					<article class="no-elevate border" style="position: sticky; top: 0; z-index: 3;">
 						<h6>{$playlistCacheStore[data.playlistId].info.title}</h6>
 						<p>
 							{cleanNumber($playlistCacheStore[data.playlistId].info.viewCount)}
@@ -546,10 +546,10 @@
 
 					{#each $playlistCacheStore[data.playlistId].videos as playlistVideo}
 						<article
-							class="no-padding primary-border"
+							class="no-padding border"
 							style="margin: .7em;"
 							id={playlistVideo.videoId}
-							class:border={playlistVideo.videoId === data.video.videoId}
+							class:primary-border={playlistVideo.videoId === data.video.videoId}
 						>
 							{#key playlistVideo.videoId}
 								<Thumbnail