Responsive design

web-player/src/lib/components/ui/Button.svelte

@@ -35,10 +35,10 @@
 	};
 
 	const variants = {
-		primary: 'bg-accent-soft font-semibold text-on-accent active:scale-[0.97]',
+		primary: 'bg-accent-soft text-on-accent active:scale-[0.97]',
 		secondary: 'border border-line text-fg hover:bg-hover',
-		subtle: 'bg-surface-2 font-semibold text-fg hover:bg-surface-hover',
-		danger: 'bg-danger font-semibold text-on-accent hover:brightness-110'
+		subtle: 'bg-surface-2 text-fg hover:bg-surface-hover',
+		danger: 'bg-danger text-on-accent hover:brightness-110'
 	};
 
 	const classes = $derived(

web-player/src/lib/components/ui/IconButton.svelte

@@ -31,7 +31,9 @@
 	title={label}
 	class="grid place-items-center rounded-control text-muted transition hover:bg-hover hover:text-fg {sizes[
 		size
-	]} {revealOnHover ? 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100' : ''} {klass}"
+	]} {revealOnHover
+		? 'sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100'
+		: ''} {klass}"
 >
 	{@render children()}
 </button>

web-player/src/lib/components/ui/ImageDropzone.svelte

@@ -10,7 +10,8 @@
 	let {
 		name,
 		fallbackUrl,
-		class: klass = 'h-52 w-52 rounded-control border border-line bg-surface hover:border-accent/50'
+		class:
+			klass = 'h-40 w-40 sm:h-52 sm:w-52 rounded-control border border-line bg-surface hover:border-accent/50'
 	}: Props = $props();
 
 	let preview = $state('');

web-player/src/lib/components/ui/MediaGrid.svelte

@@ -4,17 +4,24 @@
 	interface Props {
 		as?: 'ul' | 'div';
 		min?: string;
+		minMobile?: string;
 		class?: string;
 		children: Snippet;
 	}
 
-	let { as = 'div', min = '180px', class: klass = '', children }: Props = $props();
+	let {
+		as = 'div',
+		min = '180px',
+		minMobile = '150px',
+		class: klass = '',
+		children
+	}: Props = $props();
 </script>
 
 <svelte:element
 	this={as}
-	class="grid gap-4 {klass}"
-	style="grid-template-columns:repeat(auto-fill,minmax({min},1fr))"
+	class="grid media-grid gap-3 sm:gap-4 {klass}"
+	style="--mf-grid-min:{min}; --mf-grid-min-mobile:{minMobile}"
 >
 	{@render children()}
 </svelte:element>

web-player/src/lib/components/ui/Modal.svelte

@@ -74,7 +74,7 @@
 	>
 		<div
 			bind:this={panel}
-			class="animate-pop w-full {maxWidth} rounded-panel p-6 shadow-2xl outline-none {panelClass}"
+			class="animate-pop max-h-[85dvh] w-full overflow-y-auto {maxWidth} rounded-panel p-5 shadow-2xl outline-none sm:p-6 {panelClass}"
 			role="dialog"
 			aria-modal="true"
 			aria-label={title}

web-player/src/lib/components/ui/Page.svelte

@@ -9,6 +9,6 @@
 	let { class: klass = '', children }: Props = $props();
 </script>
 
-<section class="page-x pt-11 pb-10 {klass}">
+<section class="page-x pt-7 pb-8 sm:pt-11 sm:pb-10 {klass}">
 	{@render children()}
 </section>

web-player/src/lib/components/ui/PageHeader.svelte

@@ -11,11 +11,11 @@
 	let { title, subtitle, class: klass = '', actions }: Props = $props();
 </script>
 
-<div class="flex items-end justify-between gap-4 {klass}">
+<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between {klass}">
 	<div class="min-w-0">
-		<h1 class="text-3xl font-bold tracking-tight text-fg sm:text-4xl">{title}</h1>
+		<h1 class="text-2xl font-bold tracking-tight text-fg sm:text-4xl">{title}</h1>
 		{#if subtitle}
-			<p class="mt-2 text-fg-2">{subtitle}</p>
+			<p class="mt-2 text-sm text-fg-2 sm:text-base">{subtitle}</p>
 		{/if}
 	</div>
 	{#if actions}

web-player/src/lib/components/ui/PlaylistForm.svelte

@@ -53,7 +53,7 @@
 	}}
 	class="mt-4 w-full max-w-4xl space-y-4"
 >
-	<div class="flex items-stretch gap-8">
+	<div class="flex flex-col items-stretch gap-5 sm:flex-row sm:gap-8">
 		<Field label="Portada" optional>
 			<ImageDropzone name="cover" fallbackUrl={coverFallbackUrl} />
 		</Field>

web-player/src/lib/components/ui/SectionHeading.svelte

@@ -7,4 +7,4 @@
 	let { title, class: klass = '' }: Props = $props();
 </script>
 
-<h2 class="mb-6 text-2xl font-bold text-fg {klass}">{title}</h2>
+<h2 class="mb-4 text-xl font-bold text-fg sm:mb-6 sm:text-2xl {klass}">{title}</h2>

web-player/src/lib/components/ui/Surface.svelte

@@ -9,7 +9,7 @@
 
 	let { padding = 'md', class: klass = '', children }: Props = $props();
 
-	const paddings = { sm: 'p-4', md: 'p-6', lg: 'p-12' };
+	const paddings = { sm: 'p-4', md: 'p-5 sm:p-6', lg: 'p-6 sm:p-12' };
 </script>
 
 <div class="rounded-panel border border-line bg-surface transition {paddings[padding]} {klass}">

web-player/src/lib/components/ui/TrackRow.svelte

@@ -16,8 +16,8 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="group grid items-center gap-8 rounded-control px-3 py-2.5 transition hover:bg-surface {klass}"
-	style="grid-template-columns:{table.columns}"
+	class="group grid track-grid items-center gap-3 rounded-control px-2 py-2.5 transition hover:bg-surface sm:gap-8 sm:px-3 {klass}"
+	style="--mf-track-cols:{table.columns}; --mf-track-cols-mobile:{table.columnsMobile}"
 	{oncontextmenu}
 >
 	{@render children()}

web-player/src/lib/components/ui/TrackTable.svelte

@@ -3,6 +3,7 @@
 
 	export interface TrackTableContext {
 		readonly columns: string;
+		readonly columnsMobile: string;
 	}
 </script>
 
@@ -12,24 +13,30 @@
 
 	interface Props {
 		columns: string;
+		columnsMobile?: string;
 		class?: string;
 		headers: Snippet;
 		children: Snippet;
 	}
 
-	let { columns, class: klass = '', headers, children }: Props = $props();
+	let { columns, columnsMobile, class: klass = '', headers, children }: Props = $props();
+
+	const mobile = $derived(columnsMobile ?? columns);
 
 	setContext<TrackTableContext>(trackTableKey, {
 		get columns() {
 			return columns;
+		},
+		get columnsMobile() {
+			return mobile;
 		}
 	});
 </script>
 
 <div class={klass}>
 	<div
-		class="grid items-center gap-8 border-b border-line px-3 pb-2 text-sm font-medium tracking-wide text-muted uppercase"
-		style="grid-template-columns:{columns}"
+		class="grid track-grid items-center gap-3 border-b border-line px-2 pb-2 text-sm font-medium tracking-wide text-muted uppercase sm:gap-8 sm:px-3"
+		style="--mf-track-cols:{columns}; --mf-track-cols-mobile:{mobile}"
 	>
 		{@render headers()}
 	</div>

web-player/src/lib/components/ui/TrackTitleCell.svelte

@@ -39,7 +39,7 @@
 		{hue}
 		size="small"
 		alt={title}
-		class="{coverSize} flex-shrink-0 rounded-control"
+		class="{coverSize} shrink-0 rounded-control"
 	>
 		{@render overlay?.()}
 	</Cover>