Responsive design

web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte

@@ -34,20 +34,24 @@
 	Volver a tus listas
 </a>
 
-<div class="mt-6 flex flex-col gap-6 sm:flex-row sm:items-end">
+<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
 	<PlaylistArt
 		playlistId={id}
 		{trackIds}
 		hue={hueFor(id)}
 		size="large"
 		version={updatedAt}
-		class="h-44 w-44 flex-shrink-0 rounded-art-lg shadow-art-lg"
+		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
 	/>
 	<div class="min-w-0 flex-1">
 		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Lista</p>
-		<h1 class="mt-1.5 text-5xl font-bold tracking-tight text-fg sm:text-7xl">{name}</h1>
+		<h1
+			class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+		>
+			{name}
+		</h1>
 		{#if description}
-			<p class="mt-3 max-w-2xl text-fg-2">{description}</p>
+			<p class="mt-3 max-w-2xl text-sm text-fg-2 sm:text-base">{description}</p>
 		{/if}
 		<p class="mt-3 text-sm text-muted">
 			{trackIds.length}
@@ -56,7 +60,7 @@
 	</div>
 </div>
 
-<div class="mt-7 flex items-center gap-2.5">
+<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
 	<Button size="sm" onclick={onPlayAll} disabled={trackIds.length === 0}>
 		{#if playing}
 			<Pause class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -32,12 +32,16 @@
 	}
 </script>
 
-<TrackTable columns="32px 1fr 140px 64px 36px" class="mt-8">
+<TrackTable
+	columns="32px 1fr 140px 64px 36px"
+	columnsMobile="28px 1fr 52px 32px"
+	class="mt-6 sm:mt-8"
+>
 	{#snippet headers()}
 		<span class="text-center">#</span>
 		<span>Título</span>
-		<span class="text-center">Añadida</span>
-		<span class="text-center">Duración</span>
+		<span class="hidden text-center sm:block">Añadida</span>
+		<span class="hidden text-center sm:block">Duración</span>
 		<span></span>
 	{/snippet}
 	{#each tracks as track, i (track.id)}
@@ -67,7 +71,7 @@
 					{/if}
 				{/snippet}
 			</TrackTitleCell>
-			<TrackMeta>{fmtDate(track.createdAt)}</TrackMeta>
+			<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 			<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 			<form
 				method="POST"

web-player/src/routes/(app)/playlists/[id]/components/SuggestionsTable.svelte

@@ -82,12 +82,12 @@
 	}
 </script>
 
-<div class="mt-12">
+<div class="mt-10 sm:mt-12">
 	<SectionHeading title="Sugerencias" />
-	<TrackTable columns="1fr 64px 36px">
+	<TrackTable columns="1fr 64px 36px" columnsMobile="1fr 52px 32px">
 		{#snippet headers()}
 			<span>Título</span>
-			<span class="text-center">Duración</span>
+			<span class="hidden text-center sm:block">Duración</span>
 			<span></span>
 		{/snippet}
 		{#each suggestions as item, i (idFor(item))}