From 2208453775fbe14da293d5a4511f22c1603238c7 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 14 Jul 2026 14:24:28 +0200
Subject: [PATCH] style(frontend): restore original card sizes and stretch all
 home grids full width

---
 frontend/src/routes/+page.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 6014684..e203d18 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -85,27 +85,27 @@
 
 {#if recentlyPlayed.length > 0}
 	<section class="px-8 pb-3 pt-6">
-		<h2 class="mb-4 font-display text-2xl font-bold">Escuchado recientemente</h2>
-		<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4">
+		<h2 class="mb-4 font-display text-xl font-bold">Escuchado recientemente</h2>
+		<div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3.5">
 			{#each recentlyPlayed as track, i (track.id)}
 				<button
 					type="button"
 					onclick={() => playRecent(i)}
-					class="flex items-center gap-4 rounded-xl bg-[var(--mf-surface)] p-2.5 text-left transition hover:bg-[var(--mf-surface-hover)]"
+					class="flex items-center gap-3.5 rounded-xl bg-[var(--mf-surface)] p-2 text-left transition hover:bg-[var(--mf-surface-hover)]"
 				>
 					<Cover
 						trackId={track.id}
 						hue={hueFor(track.id)}
-						size="medium"
+						size="small"
 						alt={track.title}
-						class="h-16 w-16 flex-shrink-0 rounded-lg"
+						class="h-14 w-14 flex-shrink-0 rounded-lg"
 					>
 						{#if player.current.id === track.id}
 							<NowPlaying paused={!player.playing} />
 						{/if}
 					</Cover>
 					<div class="min-w-0">
-						<div class="truncate text-base font-semibold text-[var(--mf-text)]">{track.title}</div>
+						<div class="truncate text-sm font-semibold text-[var(--mf-text)]">{track.title}</div>
 					</div>
 				</button>
 			{/each}
@@ -116,7 +116,7 @@
 <section class="px-8 pb-3 pt-3">
 	<h2 class="mb-4 font-display text-xl font-bold">Novedades</h2>
 	{#if latest.length > 0}
-		<div class="grid max-w-[1400px] grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
+		<div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
 			{#each latest as track, i (track.id)}
 				<button
 					type="button"
@@ -166,7 +166,7 @@
 <section class="px-8 pb-16 pt-3">
 	<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
 	{#if playlists.length > 0}
-		<div class="grid max-w-[1400px] grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
+		<div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
 			{#each playlists as playlist, i (playlist.id)}
 				<a
 					href="/playlists/{playlist.id}"