From 71af37696f579eeb13c19522a37a1794005ea11a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 16 Jan 2026 06:51:57 +0000
Subject: [PATCH 01/18] Bump devalue from 5.1.1 to 5.6.2

Bumps [devalue](https://github.com/sveltejs/devalue) from 5.1.1 to 5.6.2.
- [Release notes](https://github.com/sveltejs/devalue/releases)
- [Changelog](https://github.com/sveltejs/devalue/blob/main/CHANGELOG.md)
- [Commits](https://github.com/sveltejs/devalue/compare/v5.1.1...v5.6.2)

---
updated-dependencies:
- dependency-name: devalue
  dependency-version: 5.6.2
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4e1f2da..cb68e37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6580,9 +6580,9 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
-			"integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
+			"version": "5.6.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.2.tgz",
+			"integrity": "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==",
 			"license": "MIT"
 		},
 		"node_modules/didyoumean": {

From cefcc89b3f00956d133d3a6a7bebe6b434dd226f Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 13:53:08 -0500
Subject: [PATCH 02/18] Potential fix for code scanning alert no. 23: Workflow
 does not contain permissions

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 .github/workflows/lint-format.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/lint-format.yml b/.github/workflows/lint-format.yml
index 796fe5a..8608ac3 100644
--- a/.github/workflows/lint-format.yml
+++ b/.github/workflows/lint-format.yml
@@ -7,6 +7,8 @@ on:
 
 jobs:
   lint_format:
+    permissions:
+      contents: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

From ce5bf484ffbf089b4dea74e3268289137253f9cc Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:06:15 -0500
Subject: [PATCH 03/18] adapter-node

---
 svelte.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/svelte.config.js b/svelte.config.js
index 72dcaca..2c950a2 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,7 +1,7 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 //import adapter from '@sveltejs/adapter-auto';
-//import adapter from '@sveltejs/adapter-node';
-import adapter from '@sveltejs/adapter-cloudflare';
+import adapter from '@sveltejs/adapter-node';
+//import adapter from '@sveltejs/adapter-cloudflare';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

From d6f51548432959915e5e140b97cbbd387ac674b9 Mon Sep 17 00:00:00 2001
From: HammerPot <nailington@mathstudy.dev>
Date: Fri, 23 Jan 2026 14:19:39 -0500
Subject: [PATCH 04/18] Modify rate limits to be more forgiving

Subject to more fine tuning
---
 api/maple.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/api/maple.js b/api/maple.js
index 2b0ad1e..e957274 100644
--- a/api/maple.js
+++ b/api/maple.js
@@ -56,7 +56,7 @@ var options = {
 
 const slower = slowDown({
 	windowMs: 2 * 60 * 1000,
-	delayAfter: 5,
+	delayAfter: 50,
 	delayMs: (hits) => {
 		if (hits <= 15) return hits * 100;
 		return (hits - 15) * 1000 + 2000;
@@ -66,7 +66,7 @@ const slower = slowDown({
 
 const limiter = rateLimit({
 	windowMs: 2 * 60 * 1000,
-	limit: 35,
+	limit: 100,
 })
 
 try {

From 04140b4df431fabc59bcb81cc6263a56b39c88f3 Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:20:53 -0500
Subject: [PATCH 05/18] fix playlist page

---
 src/routes/playlists/playlist/[slug]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/playlists/playlist/[slug]/+page.svelte b/src/routes/playlists/playlist/[slug]/+page.svelte
index a230c2c..0407ed9 100644
--- a/src/routes/playlists/playlist/[slug]/+page.svelte
+++ b/src/routes/playlists/playlist/[slug]/+page.svelte
@@ -206,7 +206,7 @@
 				<img
 					src={imageUrl}
 					alt={playlist?.name}
-					class="mx-auto aspect-square w-full max-w-sm rounded-lg object-cover shadow-md md:mx-0"
+					class="aspect-square w-full max-w-sm rounded-lg object-cover shadow-md"
 				/>
 			{:catch}
 				<div

From 30c0a43e30c4b5a77e8a89df59da99bc3ebb667f Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:25:42 -0500
Subject: [PATCH 06/18] fix login detection

---
 src/lib/components/SideBar.svelte                 | 4 ++--
 src/routes/playlists/playlist/[slug]/+page.svelte | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
index c42b207..ceb08bf 100644
--- a/src/lib/components/SideBar.svelte
+++ b/src/lib/components/SideBar.svelte
@@ -3,7 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { createLibrary } from '$lib/library';
-	import { SavedUser } from '$lib/store';
+	import { SavedUser, isLoggedIn } from '$lib/store';
 
 	const isActive = (path: string) => page.url.pathname === path;
 </script>
@@ -15,7 +15,7 @@
 		<div class="mt-3 mb-3 flex flex-col items-center justify-center gap-2">
 			<button
 				type="button"
-				onclick={() => goto('/settings')}
+				onclick={() => goto($isLoggedIn ? '/settings' : '/login')}
 				class="bg-primary text-on-primary hover:bg-primary/90 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-colors"
 			>
 				{#if $SavedUser?.pfp}
diff --git a/src/routes/playlists/playlist/[slug]/+page.svelte b/src/routes/playlists/playlist/[slug]/+page.svelte
index 0407ed9..33527cd 100644
--- a/src/routes/playlists/playlist/[slug]/+page.svelte
+++ b/src/routes/playlists/playlist/[slug]/+page.svelte
@@ -210,12 +210,12 @@
 				/>
 			{:catch}
 				<div
-					class="bg-surface-container mx-auto aspect-square w-full max-w-sm rounded-lg md:mx-0"
+					class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"
 				></div>
 			{/await}
 		{:else}
 			<div
-				class="bg-surface-container mx-auto aspect-square w-full max-w-sm rounded-lg md:mx-0"
+				class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"
 			></div>
 		{/if}
 		{#if editModeOn}

From a24d271d7d24968dbf600be0c8cbd65e979712c5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 19:26:08 +0000
Subject: [PATCH 07/18] style: auto-format code

---
 src/routes/playlists/playlist/[slug]/+page.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/routes/playlists/playlist/[slug]/+page.svelte b/src/routes/playlists/playlist/[slug]/+page.svelte
index 33527cd..492988c 100644
--- a/src/routes/playlists/playlist/[slug]/+page.svelte
+++ b/src/routes/playlists/playlist/[slug]/+page.svelte
@@ -209,14 +209,10 @@
 					class="aspect-square w-full max-w-sm rounded-lg object-cover shadow-md"
 				/>
 			{:catch}
-				<div
-					class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"
-				></div>
+				<div class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"></div>
 			{/await}
 		{:else}
-			<div
-				class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"
-			></div>
+			<div class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"></div>
 		{/if}
 		{#if editModeOn}
 			<div class="mt-4 space-y-2">

From e7eae837ad1671912e6ba39047ca58bef073c20c Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:32:19 -0500
Subject: [PATCH 08/18] fix the track grid & overflow

---
 src/lib/components/ListTrack.svelte           | 17 +++++++++--
 src/lib/components/Track.svelte               | 28 ++++++++++++-------
 src/routes/+page.svelte                       |  2 +-
 src/routes/albums/+page.svelte                |  2 +-
 src/routes/artists/+page.svelte               |  2 +-
 src/routes/artists/artist/[slug]/+page.svelte |  2 +-
 src/routes/playlists/+page.svelte             |  4 +--
 src/routes/tracks/+page.svelte                |  2 +-
 8 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/ListTrack.svelte b/src/lib/components/ListTrack.svelte
index 43dbdb4..aa370b8 100644
--- a/src/lib/components/ListTrack.svelte
+++ b/src/lib/components/ListTrack.svelte
@@ -263,9 +263,9 @@
 					</Lazy>
 				{/if}
 			{/if}
-			<div class="min-w-0 flex-1">
-				<p class="text-on-surface truncate">{track.title}</p>
-				<p class="text-on-surface-variant truncate text-sm">{track.artist}</p>
+			<div class="min-w-0 flex-1 max-w-[40px]">
+				<p class="text-on-surface truncate" title={track.title}>{track.title}</p>
+				<p class="text-on-surface-variant truncate text-sm" title={track.artist}>{track.artist}</p>
 			</div>
 		</div>
 		<div class="flex items-center gap-2">
@@ -386,3 +386,14 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.text-on-surface.truncate,
+	.text-on-surface-variant.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+		display: block;
+	}
+</style>
diff --git a/src/lib/components/Track.svelte b/src/lib/components/Track.svelte
index 4c06a1c..3c3437a 100644
--- a/src/lib/components/Track.svelte
+++ b/src/lib/components/Track.svelte
@@ -404,7 +404,7 @@
 						onclick={handleTrackClick}
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						><path
 							fill="currentColor"
 							d="M17.5 20q-1.05 0-1.775-.725T15 17.5t.725-1.775T17.5 15q.2 0 .45.038t.55.162V11q0-.425.288-.712T19.5 10H21q.425 0 .713.288T22 11t-.288.713T21 12h-1v5.5q0 1.05-.725 1.775T17.5 20M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m-7 8q-.425 0-.712-.288T3 19v-1.8q0-.875.438-1.575T4.6 14.55q1.55-.775 3.15-1.162T11 13q.7 0 1.388.075t1.387.225q.425.1.537.525t-.237.775q-.525.625-.788 1.363t-.262 1.537q0 .325.038.638t.137.637q.125.45-.112.838t-.663.387z"
@@ -417,7 +417,7 @@
 					<img
 						onclick={handleTrackClick}
 						src={DEFAULT_PLACEHOLDER}
-						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 							'' ||
 							album?.artist ||
@@ -433,7 +433,7 @@
 				<img
 					onclick={handleTrackClick}
 					src={imageUrl}
-					class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+					class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 					alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 						'' ||
 						album?.artist ||
@@ -449,7 +449,7 @@
 						onclick={handleTrackClick}
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						><path
 							fill="currentColor"
 							d="M17.5 20q-1.05 0-1.775-.725T15 17.5t.725-1.775T17.5 15q.2 0 .45.038t.55.162V11q0-.425.288-.712T19.5 10H21q.425 0 .713.288T22 11t-.288.713T21 12h-1v5.5q0 1.05-.725 1.775T17.5 20M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m-7 8q-.425 0-.712-.288T3 19v-1.8q0-.875.438-1.575T4.6 14.55q1.55-.775 3.15-1.162T11 13q.7 0 1.388.075t1.387.225q.425.1.537.525t-.237.775q-.525.625-.788 1.363t-.262 1.537q0 .325.038.638t.137.637q.125.45-.112.838t-.663.387z"
@@ -461,7 +461,7 @@
 					<img
 						onclick={handleTrackClick}
 						src={DEFAULT_PLACEHOLDER}
-						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+						class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 						alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 							'' ||
 							album?.artist ||
@@ -477,7 +477,7 @@
 			onclick={handleTrackClick}
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 24 24"
-			class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+			class="text-primary bg-primary-container h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 			><path
 				fill="currentColor"
 				d="M17.5 20q-1.05 0-1.775-.725T15 17.5t.725-1.775T17.5 15q.2 0 .45.038t.55.162V11q0-.425.288-.712T19.5 10H21q.425 0 .713.288T22 11t-.288.713T21 12h-1v5.5q0 1.05-.725 1.775T17.5 20M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m-7 8q-.425 0-.712-.288T3 19v-1.8q0-.875.438-1.575T4.6 14.55q1.55-.775 3.15-1.162T11 13q.7 0 1.388.075t1.387.225q.425.1.537.525t-.237.775q-.525.625-.788 1.363t-.262 1.537q0 .325.038.638t.137.637q.125.45-.112.838t-.663.387z"
@@ -489,7 +489,7 @@
 		<img
 			onclick={handleTrackClick}
 			src={DEFAULT_PLACEHOLDER}
-			class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+			class="h-44 w-44 cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 			alt="{track?.title || playlist?.name || album?.name || artist?.name} - {track?.artist ||
 				'' ||
 				album?.artist ||
@@ -497,9 +497,9 @@
 			draggable="false"
 		/>
 	{/if}
-	<div class="flex max-w-[90%] flex-col select-none md:max-w-full">
-		<p class="song-titles mt-2">{track?.title || playlist?.name || album?.name || artist?.name}</p>
-		<p class="song-artists">{track?.artist || '' || album?.artist || ''}</p>
+	<div class="flex w-44 flex-col select-none md:w-60 lg:w-64">
+		<p class="song-titles mt-2" title={track?.title || playlist?.name || album?.name || artist?.name || ''}>{track?.title || playlist?.name || album?.name || artist?.name}</p>
+		<p class="song-artists" title={track?.artist || '' || album?.artist || ''}>{track?.artist || '' || album?.artist || ''}</p>
 	</div>
 </div>
 
@@ -523,6 +523,10 @@
 			'YTFI' 728,
 			'YTLC' 514,
 			'YTUC' 712;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
 	}
 
 	.song-artists {
@@ -544,6 +548,10 @@
 			'YTFI' 728,
 			'YTLC' 514,
 			'YTUC' 712;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
 	}
 
 	@media (min-width: 768px) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 11e0c04..9206a0b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -32,7 +32,7 @@
 <div class="mt-5 flex w-full flex-col">
 	<h1 class="ml-4 text-2xl font-bold md:ml-10">Recently Played</h1>
 	<div
-		class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+		class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 	>
 		{#each recent as track}
 			<Track {track} queue={recent} queueSource={{ type: 'recent', label: 'Recently Played' }} />
diff --git a/src/routes/albums/+page.svelte b/src/routes/albums/+page.svelte
index c819e21..44363de 100644
--- a/src/routes/albums/+page.svelte
+++ b/src/routes/albums/+page.svelte
@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedAlbums as album (album.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/artists/+page.svelte b/src/routes/artists/+page.svelte
index 74f79b6..b4784ac 100644
--- a/src/routes/artists/+page.svelte
+++ b/src/routes/artists/+page.svelte
@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedArtists as artist (artist.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/artists/artist/[slug]/+page.svelte b/src/routes/artists/artist/[slug]/+page.svelte
index 4e5fb16..385ee29 100644
--- a/src/routes/artists/artist/[slug]/+page.svelte
+++ b/src/routes/artists/artist/[slug]/+page.svelte
@@ -107,7 +107,7 @@
 			onChange={handleAlbumFiltersChange}
 		/>
 		<div
-			class="grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+			class="grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 		>
 			{#each sortedAlbums as album (album.id)}
 				<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/playlists/+page.svelte b/src/routes/playlists/+page.svelte
index 743de50..d7d8872 100644
--- a/src/routes/playlists/+page.svelte
+++ b/src/routes/playlists/+page.svelte
@@ -43,14 +43,14 @@
 />
 
 <div
-	class="mr-5 mb-10 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mr-5 mb-10 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	<div class="mt-4 ml-4 flex w-full flex-col md:mt-5 md:ml-10">
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
 			onclick={createPlaylist}
-			class="bg-primary-container text-primary flash-slow flex h-44 w-44 cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-52 md:w-52"
+			class="bg-primary-container text-primary flash-slow flex h-44 w-44 cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ease-in-out select-none hover:scale-102 hover:shadow-lg active:scale-98 md:h-60 md:w-60 lg:h-64 lg:w-64"
 		>
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-16 w-16">
 				<path
diff --git a/src/routes/tracks/+page.svelte b/src/routes/tracks/+page.svelte
index c14ab22..cc0b2cf 100644
--- a/src/routes/tracks/+page.svelte
+++ b/src/routes/tracks/+page.svelte
@@ -34,7 +34,7 @@
 />
 
 <div
-	class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-4 lg:grid-cols-4 lg:gap-x-2 xl:grid-cols-5 xl:gap-x-2"
+	class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedTracks as track (track.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>

From c23aa120f52577c98a24f2bb5405e2206bfa9829 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 19:32:47 +0000
Subject: [PATCH 09/18] style: auto-format code

---
 src/lib/components/ListTrack.svelte |  2 +-
 src/lib/components/Track.svelte     | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ListTrack.svelte b/src/lib/components/ListTrack.svelte
index aa370b8..a87648a 100644
--- a/src/lib/components/ListTrack.svelte
+++ b/src/lib/components/ListTrack.svelte
@@ -263,7 +263,7 @@
 					</Lazy>
 				{/if}
 			{/if}
-			<div class="min-w-0 flex-1 max-w-[40px]">
+			<div class="max-w-[40px] min-w-0 flex-1">
 				<p class="text-on-surface truncate" title={track.title}>{track.title}</p>
 				<p class="text-on-surface-variant truncate text-sm" title={track.artist}>{track.artist}</p>
 			</div>
diff --git a/src/lib/components/Track.svelte b/src/lib/components/Track.svelte
index 3c3437a..0c2800c 100644
--- a/src/lib/components/Track.svelte
+++ b/src/lib/components/Track.svelte
@@ -498,8 +498,15 @@
 		/>
 	{/if}
 	<div class="flex w-44 flex-col select-none md:w-60 lg:w-64">
-		<p class="song-titles mt-2" title={track?.title || playlist?.name || album?.name || artist?.name || ''}>{track?.title || playlist?.name || album?.name || artist?.name}</p>
-		<p class="song-artists" title={track?.artist || '' || album?.artist || ''}>{track?.artist || '' || album?.artist || ''}</p>
+		<p
+			class="song-titles mt-2"
+			title={track?.title || playlist?.name || album?.name || artist?.name || ''}
+		>
+			{track?.title || playlist?.name || album?.name || artist?.name}
+		</p>
+		<p class="song-artists" title={track?.artist || '' || album?.artist || ''}>
+			{track?.artist || '' || album?.artist || ''}
+		</p>
 	</div>
 </div>
 

From 6ad2651d4317cc884a5c80ca971f1bccebeb2045 Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:35:39 -0500
Subject: [PATCH 10/18] fix: truncation

---
 src/lib/components/ListTrack.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ListTrack.svelte b/src/lib/components/ListTrack.svelte
index a87648a..bf765e2 100644
--- a/src/lib/components/ListTrack.svelte
+++ b/src/lib/components/ListTrack.svelte
@@ -263,7 +263,7 @@
 					</Lazy>
 				{/if}
 			{/if}
-			<div class="max-w-[40px] min-w-0 flex-1">
+			<div class="min-w-0 flex-1">
 				<p class="text-on-surface truncate" title={track.title}>{track.title}</p>
 				<p class="text-on-surface-variant truncate text-sm" title={track.artist}>{track.artist}</p>
 			</div>

From ee92cb04b4e24dfc3639eaa89431d9082073afed Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:36:48 -0500
Subject: [PATCH 11/18] hopefully stop the yap

---
 .github/workflows/lint-format.yml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lint-format.yml b/.github/workflows/lint-format.yml
index 8608ac3..a3e6949 100644
--- a/.github/workflows/lint-format.yml
+++ b/.github/workflows/lint-format.yml
@@ -25,7 +25,10 @@ jobs:
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
           git add -A
-          git diff --staged --quiet || git commit -m "style: auto-format code"
-          git push
+          if ! git diff --staged --quiet; then
+            ORIGINAL_MSG=$(git log -1 --pretty=%B)
+            git commit --amend -m "$ORIGINAL_MSG [skip ci]"
+            git push --force-with-lease
+          fi
       - run: npm run lint
         continue-on-error: true

From 4870ac42d9bc0a5ca92e835495fc8e23e691cc7e Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Fri, 23 Jan 2026 14:47:32 -0500
Subject: [PATCH 12/18] hopefully fix?

---
 src/lib/components/ListTrack.svelte              | 14 ++++++++------
 .../playlists/playlist/[slug]/+page.svelte       | 16 +++++++++-------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/ListTrack.svelte b/src/lib/components/ListTrack.svelte
index bf765e2..c67eb35 100644
--- a/src/lib/components/ListTrack.svelte
+++ b/src/lib/components/ListTrack.svelte
@@ -245,12 +245,14 @@
 				{#if track.image}
 					{#await OPFS.getImageUrl(track.image as string) then imageUrl}
 						<Lazy height={40} keep={true}>
-							<img
-								src={imageUrl}
-								alt="{track.title} - {track.artist}"
-								class="h-10 w-10 shrink-0 rounded-md object-cover"
-								draggable="false"
-							/>
+							<div class="h-10 w-10 shrink-0">
+								<img
+									src={imageUrl}
+									alt="{track.title} - {track.artist}"
+									class="h-full w-full rounded-md object-cover"
+									draggable="false"
+								/>
+							</div>
 						</Lazy>
 					{:catch}
 						<Lazy height={40} keep={true}>
diff --git a/src/routes/playlists/playlist/[slug]/+page.svelte b/src/routes/playlists/playlist/[slug]/+page.svelte
index 492988c..c4f92dc 100644
--- a/src/routes/playlists/playlist/[slug]/+page.svelte
+++ b/src/routes/playlists/playlist/[slug]/+page.svelte
@@ -203,16 +203,18 @@
 	<div class="w-full md:w-1/2 lg:w-2/5">
 		{#if playlist?.image}
 			{#await OPFS.getImageUrl(playlist.image as string) then imageUrl}
-				<img
-					src={imageUrl}
-					alt={playlist?.name}
-					class="aspect-square w-full max-w-sm rounded-lg object-cover shadow-md"
-				/>
+				<div class="aspect-square max-w-sm w-full">
+					<img
+						src={imageUrl}
+						alt={playlist?.name}
+						class="w-full h-full rounded-lg object-cover shadow-md"
+					/>
+				</div>
 			{:catch}
-				<div class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"></div>
+				<div class="bg-surface-container aspect-square max-w-sm w-full rounded-lg"></div>
 			{/await}
 		{:else}
-			<div class="bg-surface-container aspect-square w-full max-w-sm rounded-lg"></div>
+			<div class="bg-surface-container aspect-square max-w-sm w-full rounded-lg"></div>
 		{/if}
 		{#if editModeOn}
 			<div class="mt-4 space-y-2">

From 0d28dd1b164d6d353ff5a28bad04d7b57d9f81c7 Mon Sep 17 00:00:00 2001
From: Nailington <nailington@mathstudy.dev>
Date: Fri, 23 Jan 2026 19:53:43 +0000
Subject: [PATCH 13/18] remove workflow

---
 .github/workflows/lint-format.yml | 34 ------------------------
 api/package-lock.json             | 44 -------------------------------
 2 files changed, 78 deletions(-)
 delete mode 100644 .github/workflows/lint-format.yml

diff --git a/.github/workflows/lint-format.yml b/.github/workflows/lint-format.yml
deleted file mode 100644
index a3e6949..0000000
--- a/.github/workflows/lint-format.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-name: Lint and Format
-
-on:
-  push:
-    branches:
-      - '**'
-
-jobs:
-  lint_format:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GH_TOKEN }}
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - run: npm ci
-      - run: npm run format
-      - name: Commit and push formatting changes
-        run: |
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-          git add -A
-          if ! git diff --staged --quiet; then
-            ORIGINAL_MSG=$(git log -1 --pretty=%B)
-            git commit --amend -m "$ORIGINAL_MSG [skip ci]"
-            git push --force-with-lease
-          fi
-      - run: npm run lint
-        continue-on-error: true
diff --git a/api/package-lock.json b/api/package-lock.json
index 9787940..897f0b5 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -776,8 +776,6 @@
 			"version": "4.21.2",
 			"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
 			"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-			"peer": true,
-			"peer": true,
 			"dependencies": {
 				"accepts": "~1.3.8",
 				"array-flatten": "1.1.1",
@@ -866,39 +864,6 @@
 				"express": ">= 4.11"
 			}
 		},
-		"node_modules/express-slow-down": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/express-slow-down/-/express-slow-down-3.0.1.tgz",
-			"integrity": "sha512-Syl+K1o/z8zSTsMWbDpJEOF5WzSj923ktkv/WbNq6E3tmNwPoEcKIhqRxMLWq3a/4OudRciylEqEZvzMBdzn8w==",
-			"license": "MIT",
-			"dependencies": {
-				"express-rate-limit": "8"
-			},
-			"engines": {
-				"node": ">= 16"
-			},
-			"peerDependencies": {
-				"express": "4 || 5 || ^5.0.0-beta.1"
-			}
-		},
-		"node_modules/express-slow-down/node_modules/express-rate-limit": {
-			"version": "8.2.1",
-			"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
-			"integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
-			"license": "MIT",
-			"dependencies": {
-				"ip-address": "10.0.1"
-			},
-			"engines": {
-				"node": ">= 16"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/express-rate-limit"
-			},
-			"peerDependencies": {
-				"express": ">= 4.11"
-			}
-		},
 		"node_modules/express-validator": {
 			"version": "7.3.1",
 			"resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.3.1.tgz",
@@ -1233,15 +1198,6 @@
 				"node": ">= 12"
 			}
 		},
-		"node_modules/ip-address": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
-			"integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 12"
-			}
-		},
 		"node_modules/ipaddr.js": {
 			"version": "1.9.1",
 			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",

From e80acf37b46dc145e257fe618b86e71cca4f7d25 Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Wed, 28 Jan 2026 11:31:16 -0500
Subject: [PATCH 14/18] navigator Fix

---
 src/lib/player.ts | 134 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 126 insertions(+), 8 deletions(-)

diff --git a/src/lib/player.ts b/src/lib/player.ts
index 7d38140..614d03d 100644
--- a/src/lib/player.ts
+++ b/src/lib/player.ts
@@ -22,6 +22,98 @@ import UserSettings from '$lib/preferences/usersettings';
 import { UserManager } from './api/UserManager';
 import { SERVER } from '$lib/api/server';
 
+let mediaSessionInitialized = false;
+
+function initMediaSession() {
+	if (!browser || mediaSessionInitialized || !('mediaSession' in navigator)) return;
+	mediaSessionInitialized = true;
+
+	navigator.mediaSession.setActionHandler('play', () => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement && !state.playing) {
+			togglePlay();
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('pause', () => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement && state.playing) {
+			togglePlay();
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('previoustrack', () => {
+		previous();
+	});
+
+	navigator.mediaSession.setActionHandler('nexttrack', () => {
+		next();
+	});
+
+	navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement) {
+			const skipTime = details.seekOffset || 10;
+			seekTo(Math.max(state.audio.currentTime - skipTime, 0));
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('seekforward', (details) => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement) {
+			const skipTime = details.seekOffset || 10;
+			seekTo(Math.min(state.audio.currentTime + skipTime, state.audio.duration || 0));
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('seekto', (details) => {
+		if (details.seekTime !== undefined) {
+			seekTo(details.seekTime);
+		}
+	});
+
+	navigator.mediaSession.setActionHandler('stop', () => {
+		const state = get(audioPlayer);
+		if (state.audio instanceof HTMLAudioElement) {
+			state.audio.pause();
+			state.audio.currentTime = 0;
+			audioPlayer.update((value) => ({ ...value, playing: false, currentTime: 0 }));
+		}
+	});
+}
+
+function updateMediaSessionMetadata(song: Song, artworkUrl?: string) {
+	if (!browser || !('mediaSession' in navigator)) return;
+	initMediaSession();
+
+	const artwork: MediaImage[] = artworkUrl ? [{ src: artworkUrl, sizes: '512x512', type: 'image/jpeg' }] : [];
+
+	navigator.mediaSession.metadata = new MediaMetadata({
+		title: song.title || 'Unknown Title',
+		artist: song.artist || 'Unknown Artist',
+		album: song.album || 'Unknown Album',
+		artwork
+	});
+}
+
+function updateMediaSessionPlaybackState(playing: boolean) {
+	if (!browser || !('mediaSession' in navigator)) return;
+	navigator.mediaSession.playbackState = playing ? 'playing' : 'paused';
+}
+
+function updateMediaSessionPositionState(audio: HTMLAudioElement) {
+	if (!browser || !('mediaSession' in navigator) || !audio.duration || !isFinite(audio.duration)) return;
+	try {
+		navigator.mediaSession.setPositionState({
+			duration: audio.duration,
+			playbackRate: audio.playbackRate,
+			position: audio.currentTime
+		});
+	} catch {
+
+	}
+}
+
 type QueueSourceState = QueueSnapshot['source'];
 
 function updateQueue(items: Song[], index: number, source?: QueueSourceState) {
@@ -39,6 +131,24 @@ async function getImageFile(imagePath: string): Promise<File> {
 	return new File([arrayBuffer], imagePath, { type: 'image/jpeg' });
 }
 
+async function uploadAlbumArt(song: Song): Promise<boolean> {
+	const isLoggedIn = await UserManager.isLoggedIn();
+	if (!isLoggedIn) return false;
+
+	if (!song.image || typeof song.image !== 'string') return false;
+
+	try {
+		const image = await getImageFile(song.image);
+		const imageBuffer = await image.arrayBuffer();
+		const imageFile = new File([imageBuffer], 'album.jpg', { type: 'image/jpeg' });
+		await UserManager.setAlbumArt(imageFile);
+		return true;
+	} catch (error) {
+		console.error('Error uploading album art:', error);
+		return false;
+	}
+}
+
 async function sendWebhook(song: Song) {
 	if (!UserSettings.webhook.enabled || !UserSettings.webhook.url) return;
 
@@ -46,15 +156,9 @@ async function sendWebhook(song: Song) {
 	if (!isLoggedIn) return;
 
 	if (!song.image || typeof song.image !== 'string') return;
-	const imagePath: string = song.image;
 
 	try {
-		const image = await getImageFile(imagePath);
-		const imageBuffer = await image.arrayBuffer();
-		const imageFile = new File([imageBuffer], 'album.jpg', { type: 'image/jpeg' });
-		await UserManager.setAlbumArt(imageFile);
-		await new Promise((resolve) => setTimeout(resolve, 100));
-
+		const image = await getImageFile(song.image);
 		const user = get(SavedUser);
 		const formData = new FormData();
 		formData.append('file', image, 'album.jpg');
@@ -114,6 +218,11 @@ async function emitNowPlaying(song: Song) {
 		source: 'Web'
 	};
 	s.emit('nowPlaying', { nowPlaying: payload });
+
+	const artworkUploaded = await uploadAlbumArt(song);
+	const artworkUrl = artworkUploaded ? `${SERVER}/public/get/albumArt/${user.id}/${crypto.randomUUID()}` : undefined;
+	updateMediaSessionMetadata(song, artworkUrl);
+
 	await sendWebhook(song);
 }
 
@@ -140,10 +249,14 @@ async function playAtIndex(index: number) {
 			audio.src = audioUrl;
 			audio.currentTime = 0;
 			audio.play();
+			audio.addEventListener('loadedmetadata', () => {
+				updateMediaSessionPositionState(audio);
+			}, { once: true });
 			return { ...value, audio, playing: true, currentTime: 0, onEnded: next };
 		}
 		return value;
 	});
+	updateMediaSessionPlaybackState(true);
 	await emitNowPlaying(song);
 }
 
@@ -190,6 +303,7 @@ export async function next() {
 			}
 			return { ...value, playing: false };
 		});
+		updateMediaSessionPlaybackState(false);
 		return;
 	}
 	statsManager.recordSkip();
@@ -210,6 +324,7 @@ export function togglePlay() {
 	} else {
 		statsManager.recordResume();
 	}
+	const newPlayingState = !state.playing;
 	audioPlayer.update((value) => {
 		if (value.audio instanceof HTMLAudioElement) {
 			if (value.playing) {
@@ -217,10 +332,12 @@ export function togglePlay() {
 			} else {
 				value.audio.play();
 			}
-			return { ...value, playing: !value.playing, currentTime: value.audio.currentTime };
+			updateMediaSessionPositionState(value.audio);
+			return { ...value, playing: newPlayingState, currentTime: value.audio.currentTime };
 		}
 		return value;
 	});
+	updateMediaSessionPlaybackState(newPlayingState);
 }
 
 export function setVolumeLevel(volume: number) {
@@ -233,6 +350,7 @@ export function seekTo(time: number) {
 	audioPlayer.update((value) => {
 		if (value.audio instanceof HTMLAudioElement) {
 			value.audio.currentTime = time;
+			updateMediaSessionPositionState(value.audio);
 			return { ...value, currentTime: time };
 		}
 		return value;

From 99662c699c2923d4f62b66b6c3219a2046513c22 Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Wed, 28 Jan 2026 11:33:36 -0500
Subject: [PATCH 15/18] small fix

Closes #64
---
 src/lib/player.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/player.ts b/src/lib/player.ts
index 614d03d..564d84e 100644
--- a/src/lib/player.ts
+++ b/src/lib/player.ts
@@ -338,7 +338,7 @@ export function togglePlay() {
 		return value;
 	});
 	updateMediaSessionPlaybackState(newPlayingState);
-}
+} 
 
 export function setVolumeLevel(volume: number) {
 	audioPlayer.update((value) => ({ ...value, volume, changeVolume: true }));

From e0d30b2113407e70637bd3c860d4986fcfbcab1f Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Wed, 28 Jan 2026 11:43:58 -0500
Subject: [PATCH 16/18] fix padding on mobile

Closes #65
---
 src/routes/+page.svelte                     | 2 +-
 src/routes/albums/+page.svelte              | 2 +-
 src/routes/albums/album/[slug]/+page.svelte | 2 +-
 src/routes/artists/+page.svelte             | 2 +-
 src/routes/tracks/+page.svelte              | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9206a0b..3944a21 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -32,7 +32,7 @@
 <div class="mt-5 flex w-full flex-col">
 	<h1 class="ml-4 text-2xl font-bold md:ml-10">Recently Played</h1>
 	<div
-		class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+		class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 	>
 		{#each recent as track}
 			<Track {track} queue={recent} queueSource={{ type: 'recent', label: 'Recently Played' }} />
diff --git a/src/routes/albums/+page.svelte b/src/routes/albums/+page.svelte
index 44363de..bf2be77 100644
--- a/src/routes/albums/+page.svelte
+++ b/src/routes/albums/+page.svelte
@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedAlbums as album (album.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/albums/album/[slug]/+page.svelte b/src/routes/albums/album/[slug]/+page.svelte
index d675d6c..7236db9 100644
--- a/src/routes/albums/album/[slug]/+page.svelte
+++ b/src/routes/albums/album/[slug]/+page.svelte
@@ -188,7 +188,7 @@
 	});
 </script>
 
-<div class="flex flex-col gap-8 pt-4 pr-3 pl-3 md:flex-row md:pt-14 md:pr-20 md:pl-14 lg:pl-28">
+<div class="flex flex-col gap-8 pt-4 pr-3 pl-3 md:flex-row md:pt-14 md:pr-20 md:pl-14 lg:pl-28 mb-5 md:mb-0">
 	<div class="w-full md:w-1/2 lg:w-2/5">
 		{#if imageUrl}
 			<img
diff --git a/src/routes/artists/+page.svelte b/src/routes/artists/+page.svelte
index b4784ac..5650869 100644
--- a/src/routes/artists/+page.svelte
+++ b/src/routes/artists/+page.svelte
@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedArtists as artist (artist.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>
diff --git a/src/routes/tracks/+page.svelte b/src/routes/tracks/+page.svelte
index cc0b2cf..c2d95b9 100644
--- a/src/routes/tracks/+page.svelte
+++ b/src/routes/tracks/+page.svelte
@@ -34,7 +34,7 @@
 />
 
 <div
-	class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedTracks as track (track.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>

From f2b95ebb5d6d7162842e96f0cbebdfdd404ffe16 Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Wed, 28 Jan 2026 11:50:26 -0500
Subject: [PATCH 17/18] fix truncation

Closes #69
---
 src/lib/components/ListTrack.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ListTrack.svelte b/src/lib/components/ListTrack.svelte
index c67eb35..926771c 100644
--- a/src/lib/components/ListTrack.svelte
+++ b/src/lib/components/ListTrack.svelte
@@ -237,7 +237,7 @@
 		ondrop={onDrop}
 		ondragend={onDragEnd}
 	>
-		<div class="flex min-w-0 items-center gap-4">
+		<div class="flex min-w-0 flex-1 items-center gap-4 overflow-hidden">
 			<span class="text-on-surface-variant w-8 shrink-0 text-right text-sm tabular-nums"
 				>{index}</span
 			>
@@ -265,7 +265,7 @@
 					</Lazy>
 				{/if}
 			{/if}
-			<div class="min-w-0 flex-1">
+			<div class="min-w-0 flex-1 overflow-hidden">
 				<p class="text-on-surface truncate" title={track.title}>{track.title}</p>
 				<p class="text-on-surface-variant truncate text-sm" title={track.artist}>{track.artist}</p>
 			</div>

From cf6f0f48f05485fe8cae3fa8749e7e3064d211d7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 25 Feb 2026 15:56:13 +0000
Subject: [PATCH 18/18] Bump tar from 7.4.3 to 7.5.9

Bumps [tar](https://github.com/isaacs/node-tar) from 7.4.3 to 7.5.9.
- [Release notes](https://github.com/isaacs/node-tar/releases)
- [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md)
- [Commits](https://github.com/isaacs/node-tar/compare/v7.4.3...v7.5.9)

---
updated-dependencies:
- dependency-name: tar
  dependency-version: 7.5.9
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 97 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 71 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aa8fb45..86eaeba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1686,6 +1686,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"tslib": "^2.4.0"
 			}
@@ -3665,6 +3666,66 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+			"version": "1.4.3",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.0.2",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+			"version": "1.4.3",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+			"version": "1.0.2",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+			"version": "0.2.11",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "^1.4.3",
+				"@emnapi/runtime": "^1.4.3",
+				"@tybys/wasm-util": "^0.9.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+			"version": "0.9.0",
+			"dev": true,
+			"inBundle": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+			"version": "2.8.0",
+			"dev": true,
+			"inBundle": true,
+			"license": "0BSD",
+			"optional": true
+		},
 		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
 			"version": "4.1.11",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
@@ -7335,9 +7396,9 @@
 			}
 		},
 		"node_modules/minizlib": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-			"integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+			"integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -7347,22 +7408,6 @@
 				"node": ">= 18"
 			}
 		},
-		"node_modules/mkdirp": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-			"integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-			"dev": true,
-			"license": "MIT",
-			"bin": {
-				"mkdirp": "dist/cjs/src/bin.js"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -9200,17 +9245,16 @@
 			}
 		},
 		"node_modules/tar": {
-			"version": "7.4.3",
-			"resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-			"integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+			"version": "7.5.9",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-7.5.9.tgz",
+			"integrity": "sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==",
 			"dev": true,
-			"license": "ISC",
+			"license": "BlueOak-1.0.0",
 			"dependencies": {
 				"@isaacs/fs-minipass": "^4.0.0",
 				"chownr": "^3.0.0",
 				"minipass": "^7.1.2",
-				"minizlib": "^3.0.1",
-				"mkdirp": "^3.0.1",
+				"minizlib": "^3.1.0",
 				"yallist": "^5.0.0"
 			},
 			"engines": {
@@ -9341,7 +9385,8 @@
 			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
 			"dev": true,
 			"license": "0BSD",
-			"optional": true
+			"optional": true,
+			"peer": true
 		},
 		"node_modules/type-check": {
 			"version": "0.4.0",