From 02e093d25411c7b341d1186a05274260339bb03e Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 15 Jul 2026 16:10:11 +0200
Subject: [PATCH] style(frontend): even out page-bottom spacing and header
 sizing

Home and explore had an oversized trailing bottom padding compared to
the rest of the app; brought both down to match. Also matches "Mis
listas" grid/limit on home to "Novedades", and sizes the library page
header the same as the playlists page header.
---
 frontend/src/routes/(app)/explore/+page.svelte |  2 +-
 frontend/src/routes/(app)/library/+page.svelte |  4 ++--
 frontend/src/routes/+page.server.ts            |  2 +-
 frontend/src/routes/+page.svelte               | 10 +++++++---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/(app)/explore/+page.svelte b/frontend/src/routes/(app)/explore/+page.svelte
index c641cfd..f43da48 100644
--- a/frontend/src/routes/(app)/explore/+page.svelte
+++ b/frontend/src/routes/(app)/explore/+page.svelte
@@ -53,7 +53,7 @@
 	<meta name="description" content="Explora y busca canciones en Musify." />
 </svelte:head>
 
-<section class="px-8 py-12">
+<section class="px-8 pt-12 pb-8">
 	<h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Explorar</h1>
 	<p class="mt-2 text-neutral-400">Descubre canciones o busca por nombre.</p>
 
diff --git a/frontend/src/routes/(app)/library/+page.svelte b/frontend/src/routes/(app)/library/+page.svelte
index ea58262..30ccc13 100644
--- a/frontend/src/routes/(app)/library/+page.svelte
+++ b/frontend/src/routes/(app)/library/+page.svelte
@@ -33,8 +33,8 @@
 <section class="px-8 py-11">
 	<div class="flex items-end justify-between gap-4">
 		<div>
-			<h1 class="font-display text-[28px] font-extrabold tracking-tight">Tus canciones subidas</h1>
-			<p class="mt-1.5 text-sm text-[var(--mf-text-2)]">
+			<h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Tus canciones subidas</h1>
+			<p class="mt-2 text-[var(--mf-text-2)]">
 				{total}
 				{total === 1 ? 'canción' : 'canciones'} subida{total === 1 ? '' : 's'}.
 			</p>
diff --git a/frontend/src/routes/+page.server.ts b/frontend/src/routes/+page.server.ts
index 088fb30..04d19f0 100644
--- a/frontend/src/routes/+page.server.ts
+++ b/frontend/src/routes/+page.server.ts
@@ -9,7 +9,7 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
 	});
 	const playlistsPromise = locals.user
 		? api.GET('/playlists/users/{userId}', {
-				params: { path: { userId: locals.user.sub }, query: { pageNumber: 1, pageSize: 8 } }
+				params: { path: { userId: locals.user.sub }, query: { pageNumber: 1, pageSize: 12 } }
 			})
 		: Promise.resolve({ data: undefined });
 	const recentlyPlayedPromise = locals.user
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index e912fd3..dfbbbe2 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -46,6 +46,9 @@
 		return /[.!?]$/.test(pick) ? pick : `${pick}.`;
 	})();
 
+	const listasIsFirstSection = $derived(recentlyPlayed.length === 0 && playlists.length > 0);
+	const novedadesIsFirstSection = $derived(recentlyPlayed.length === 0 && playlists.length === 0);
+
 	function hueFor(id: string) {
 		let hash = 0;
 		for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
@@ -114,9 +117,9 @@
 {/if}
 
 {#if playlists.length > 0}
-	<section class="px-8 pb-3 pt-3">
+	<section class="px-8 pb-3 {listasIsFirstSection ? 'pt-6' : 'pt-3'}">
 	<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
-		<div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
+		<div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
 			{#each playlists as playlist, i (playlist.id)}
 				<a
 					href="/playlists/{playlist.id}"
@@ -124,6 +127,7 @@
 					style="animation-delay:{i * 45}ms"
 				>
 					<PlaylistArt
+						playlistId={playlist.id}
 						trackIds={trackIds[playlist.id] ?? []}
 						hue={hueFor(playlist.id)}
 						class="aspect-square w-full rounded-xl shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)] transition group-hover:shadow-[0_16px_36px_-10px_rgba(0,0,0,0.75)]"
@@ -137,7 +141,7 @@
 </section>
 {/if}
 
-<section class="px-8 pb-16 pt-3">
+<section class="px-8 pb-8 {novedadesIsFirstSection ? 'pt-6' : 'pt-3'}">
 	<h2 class="mb-4 font-display text-xl font-bold">Novedades</h2>
 	{#if latest.length > 0}
 		<div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">