From af669448db7d4eb7243a0e1962e5efea5e5bf24d Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 29 Jan 2026 00:21:17 +1030
Subject: [PATCH] style(mm): better mobile views for media management. Hide
 slider componenet in quality defs, only show number inputs

---
 src/lib/client/ui/button/Button.svelte        |   4 +-
 src/lib/client/ui/card/StickyCard.svelte      |  18 +--
 .../components/MediaSettingsForm.svelte       |   2 +-
 .../naming/components/RadarrNamingForm.svelte |   2 +-
 .../naming/components/SonarrNamingForm.svelte |   2 +-
 .../components/QualityDefinitionsForm.svelte  | 121 +++++++++---------
 6 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/src/lib/client/ui/button/Button.svelte b/src/lib/client/ui/button/Button.svelte
index 84e170f..3d32137 100644
--- a/src/lib/client/ui/button/Button.svelte
+++ b/src/lib/client/ui/button/Button.svelte
@@ -24,7 +24,7 @@
 
 	onMount(() => {
 		if (responsive && typeof window !== 'undefined') {
-			mediaQuery = window.matchMedia('(max-width: 1279px)');
+			mediaQuery = window.matchMedia('(max-width: 767px)');
 			isSmallScreen = mediaQuery.matches;
 			mediaQuery.addEventListener('change', handleMediaChange);
 		}
@@ -46,7 +46,7 @@
 
 	const sizeClasses = {
 		xs: 'gap-1 rounded px-2 py-1 text-xs',
-		sm: 'gap-1.5 rounded-lg px-3 py-2',
+		sm: 'gap-1.5 rounded-lg px-3 py-1.5 text-sm md:py-2',
 		md: 'gap-2 rounded-lg px-4 py-2.5'
 	};
 
diff --git a/src/lib/client/ui/card/StickyCard.svelte b/src/lib/client/ui/card/StickyCard.svelte
index 48820f5..db03c84 100644
--- a/src/lib/client/ui/card/StickyCard.svelte
+++ b/src/lib/client/ui/card/StickyCard.svelte
@@ -38,25 +38,25 @@
 		{position === 'top' ? 'top-0' : 'bottom-0'}"
 >
 	<div class="px-4 py-3 md:px-12 md:py-4">
-		<div class="flex items-center justify-between gap-3 md:gap-4">
-			<div class="[&_h1]:text-sm [&_h1]:md:text-xl [&_p]:text-xs [&_p]:md:text-sm">
+		<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between md:gap-4">
+			<div class="min-w-0 [&_h1]:text-base [&_h1]:font-semibold [&_h1]:md:text-xl [&_p]:text-xs [&_p]:md:text-sm">
 				<slot name="left" />
 			</div>
-			<slot name="right" />
+			<div class="border-t border-neutral-200 pt-3 dark:border-neutral-800 md:border-0 md:pt-0">
+				<div class="flex flex-shrink-0 flex-wrap items-center gap-2">
+					<slot name="right" />
+				</div>
+			</div>
 		</div>
 	</div>
 	{#if variant === 'default'}
 		{#if position === 'top'}
 			<div
-				class="border-b border-neutral-200 transition-[margin] duration-200 dark:border-neutral-800 {isStuck
-					? ''
-					: 'mx-4 md:mx-8'}"
+				class="mx-4 border-b border-neutral-200 dark:border-neutral-800 md:mx-8"
 			></div>
 		{:else}
 			<div
-				class="border-t border-neutral-200 transition-[margin] duration-200 dark:border-neutral-800 {isStuck
-					? ''
-					: 'mx-4 md:mx-8'}"
+				class="mx-4 border-t border-neutral-200 dark:border-neutral-800 md:mx-8"
 			></div>
 		{/if}
 	{/if}
diff --git a/src/routes/media-management/[databaseId]/media-settings/components/MediaSettingsForm.svelte b/src/routes/media-management/[databaseId]/media-settings/components/MediaSettingsForm.svelte
index 9bf1b3f..bd3f054 100644
--- a/src/routes/media-management/[databaseId]/media-settings/components/MediaSettingsForm.svelte
+++ b/src/routes/media-management/[databaseId]/media-settings/components/MediaSettingsForm.svelte
@@ -129,7 +129,7 @@
 	</div>
 </StickyCard>
 
-<div class="mt-6 px-4">
+<div class="mt-6 md:px-4">
 	<div
 		class="space-y-6 rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
 	>
diff --git a/src/routes/media-management/[databaseId]/naming/components/RadarrNamingForm.svelte b/src/routes/media-management/[databaseId]/naming/components/RadarrNamingForm.svelte
index b3d1d60..91eae03 100644
--- a/src/routes/media-management/[databaseId]/naming/components/RadarrNamingForm.svelte
+++ b/src/routes/media-management/[databaseId]/naming/components/RadarrNamingForm.svelte
@@ -135,7 +135,7 @@
 	</div>
 </StickyCard>
 
-<div class="mt-6 px-4">
+<div class="mt-6 md:px-4">
 	<div
 		class="space-y-6 rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
 	>
diff --git a/src/routes/media-management/[databaseId]/naming/components/SonarrNamingForm.svelte b/src/routes/media-management/[databaseId]/naming/components/SonarrNamingForm.svelte
index ba33a27..51ce963 100644
--- a/src/routes/media-management/[databaseId]/naming/components/SonarrNamingForm.svelte
+++ b/src/routes/media-management/[databaseId]/naming/components/SonarrNamingForm.svelte
@@ -151,7 +151,7 @@
 	</div>
 </StickyCard>
 
-<div class="mt-6 px-4">
+<div class="mt-6 md:px-4">
 	<div
 		class="space-y-6 rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
 	>
diff --git a/src/routes/media-management/[databaseId]/quality-definitions/components/QualityDefinitionsForm.svelte b/src/routes/media-management/[databaseId]/quality-definitions/components/QualityDefinitionsForm.svelte
index 82b3805..ae29b12 100644
--- a/src/routes/media-management/[databaseId]/quality-definitions/components/QualityDefinitionsForm.svelte
+++ b/src/routes/media-management/[databaseId]/quality-definitions/components/QualityDefinitionsForm.svelte
@@ -295,7 +295,7 @@
 				type="button"
 				on:click={() => (showUnitDropdown = !showUnitDropdown)}
 				on:blur={() => setTimeout(() => (showUnitDropdown = false), 150)}
-				class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+				class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 md:py-2 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
 			>
 				{selectedUnit.label}
 				<ChevronDown
@@ -305,7 +305,7 @@
 			</button>
 
 			{#if showUnitDropdown}
-				<Dropdown position="right" minWidth="12rem">
+				<Dropdown position="left" minWidth="12rem">
 					{#each unitOptions as unit}
 						<DropdownItem
 							label="{unit.label} ({unit.short})"
@@ -339,25 +339,22 @@
 	</div>
 </StickyCard>
 
-<div class="mt-6 px-4 space-y-6">
+<div class="mt-6 space-y-6 md:px-4">
 	<!-- Name input -->
-	<div class="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900">
-		<h2 class="text-base font-semibold text-neutral-900 dark:text-neutral-100 mb-4">Basic Info</h2>
-		<div>
-			<label
-				for="name"
-				class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
-			>
-				Name <span class="text-red-500">*</span>
-			</label>
-			<input
-				type="text"
-				id="name"
-				bind:value={configName}
-				placeholder="e.g., default"
-				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
-			/>
-		</div>
+	<div>
+		<label
+			for="name"
+			class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
+		>
+			Name <span class="text-red-500">*</span>
+		</label>
+		<input
+			type="text"
+			id="name"
+			bind:value={configName}
+			placeholder="e.g., default"
+			class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-base sm:text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
+		/>
 	</div>
 
 	<!-- Quality definitions table -->
@@ -394,14 +391,14 @@
 				<div class="divide-y divide-neutral-200 dark:divide-neutral-700">
 					{#each row.entries as entry (entry.quality_name)}
 						{@const markers = markersMap[entry.quality_name] || createMarkers(entry)}
-						<div class="flex items-center gap-3 bg-white pt-5 pr-4 pb-8 pl-8 dark:bg-neutral-900">
+						<div class="flex flex-col gap-3 bg-white px-4 py-4 md:flex-row md:items-center md:gap-3 md:pt-5 md:pr-4 md:pb-8 md:pl-8 dark:bg-neutral-900">
 							<!-- Quality Name -->
-							<div class="w-32 shrink-0 text-sm font-medium text-neutral-900 dark:text-neutral-100">
+							<div class="text-sm font-medium text-neutral-900 md:w-32 md:shrink-0 dark:text-neutral-100">
 								{entry.quality_name}
 							</div>
 
-							<!-- Range Scale -->
-							<div class="min-w-0 flex-1 pt-4 pr-16 pl-2">
+							<!-- Range Scale (hidden on mobile) -->
+							<div class="hidden min-w-0 flex-1 pt-4 pr-16 pl-2 md:block">
 								<RangeScale
 									orientation="horizontal"
 									direction="start"
@@ -418,48 +415,50 @@
 							</div>
 
 							<!-- Number Inputs -->
-							<div class="w-24 shrink-0">
-								<div class="mb-1 flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400">
-									Min <span class="text-neutral-400 dark:text-neutral-500">(MB/m)</span>
+							<div class="flex gap-2 md:contents">
+								<div class="flex-1 md:w-24 md:flex-none md:shrink-0">
+									<div class="mb-1 flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400">
+										Min <span class="text-neutral-400 dark:text-neutral-500">(MB/m)</span>
+									</div>
+									<NumberInput
+										id="min-{entry.quality_name}"
+										name="min-{entry.quality_name}"
+										bind:value={markers[0].value}
+										min={0}
+										max={markers[1].value}
+										step={1}
+										onchange={() => syncToEntry(entry.quality_name)}
+									/>
 								</div>
-								<NumberInput
-									id="min-{entry.quality_name}"
-									name="min-{entry.quality_name}"
-									bind:value={markers[0].value}
-									min={0}
-									max={markers[1].value}
-									step={1}
-									onchange={() => syncToEntry(entry.quality_name)}
-								/>
-							</div>
 
-							<div class="w-24 shrink-0">
-								<div class="mb-1 flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-400">
-									Pref <span class="text-neutral-400 dark:text-neutral-500">(MB/m)</span>
+								<div class="flex-1 md:w-24 md:flex-none md:shrink-0">
+									<div class="mb-1 flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-400">
+										Pref <span class="text-neutral-400 dark:text-neutral-500">(MB/m)</span>
+									</div>
+									<NumberInput
+										id="preferred-{entry.quality_name}"
+										name="preferred-{entry.quality_name}"
+										bind:value={markers[1].value}
+										min={markers[0].value}
+										max={markers[2].value}
+										step={1}
+										onchange={() => syncToEntry(entry.quality_name)}
+									/>
 								</div>
-								<NumberInput
-									id="preferred-{entry.quality_name}"
-									name="preferred-{entry.quality_name}"
-									bind:value={markers[1].value}
-									min={markers[0].value}
-									max={markers[2].value}
-									step={1}
-									onchange={() => syncToEntry(entry.quality_name)}
-								/>
-							</div>
 
-							<div class="w-24 shrink-0">
-								<div class="mb-1 flex items-center gap-1 text-xs font-medium text-orange-600 dark:text-orange-400">
-									Max <span class="text-neutral-400 dark:text-neutral-500">(MB/m)</span>
+								<div class="flex-1 md:w-24 md:flex-none md:shrink-0">
+									<div class="mb-1 flex items-center gap-1 text-xs font-medium text-orange-600 dark:text-orange-400">
+										Max <span class="text-neutral-400 dark:text-neutral-500">(MB/m)</span>
+									</div>
+									<NumberInput
+										id="max-{entry.quality_name}"
+										name="max-{entry.quality_name}"
+										bind:value={markers[2].value}
+										min={markers[1].value}
+										step={1}
+										onchange={() => syncToEntry(entry.quality_name)}
+									/>
 								</div>
-								<NumberInput
-									id="max-{entry.quality_name}"
-									name="max-{entry.quality_name}"
-									bind:value={markers[2].value}
-									min={markers[1].value}
-									step={1}
-									onchange={() => syncToEntry(entry.quality_name)}
-								/>
 							</div>
 						</div>
 					{/each}