From 03958a29ada1ba096a3d2b1497a2bb3a2d95457e Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 29 Jan 2026 00:53:31 +1030
Subject: [PATCH] style(ui): remove size dropdown in quality defs mobile,
 remove tiny buttons from number input mobile

---
 src/lib/client/ui/form/NumberInput.svelte     | 45 ++++++++++---------
 .../components/QualityDefinitionsForm.svelte  |  7 ++-
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/lib/client/ui/form/NumberInput.svelte b/src/lib/client/ui/form/NumberInput.svelte
index 1c83aac..3cd2a1c 100644
--- a/src/lib/client/ui/form/NumberInput.svelte
+++ b/src/lib/client/ui/form/NumberInput.svelte
@@ -44,9 +44,12 @@
 	}
 
 	$: isCompact = compact || (responsive && isSmallScreen);
+	$: hideButtons = responsive && isSmallScreen;
 	$: fontClass = font === 'mono' ? 'font-mono' : font === 'sans' ? 'font-sans' : '';
 	$: inputSizeClasses = isCompact
-		? 'rounded px-2 py-1 pr-7 text-xs'
+		? hideButtons
+			? 'rounded px-2 py-1 text-xs'
+			: 'rounded px-2 py-1 pr-7 text-xs'
 		: 'rounded-lg px-3 py-2 pr-10';
 	$: buttonSizeClasses = isCompact ? 'h-2.5 w-4' : 'h-4 w-6';
 	$: iconSize = isCompact ? 10 : 12;
@@ -121,23 +124,25 @@
 		class="block w-full [appearance:textfield] border border-neutral-300 bg-white text-neutral-900 placeholder-neutral-400 focus:outline-none disabled:bg-neutral-100 disabled:text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900 dark:disabled:text-neutral-600 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none {inputSizeClasses} {fontClass}"
 	/>
 
-	<!-- Custom increment/decrement buttons -->
-	<div class="absolute top-1/2 right-1 flex -translate-y-1/2 flex-col">
-		<button
-			type="button"
-			on:click={increment}
-			{disabled}
-			class="flex {buttonSizeClasses} items-center justify-center rounded-t border border-neutral-300 bg-white text-neutral-600 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
-		>
-			<ChevronUp size={iconSize} />
-		</button>
-		<button
-			type="button"
-			on:click={decrement}
-			{disabled}
-			class="flex {buttonSizeClasses} items-center justify-center rounded-b border border-t-0 border-neutral-300 bg-white text-neutral-600 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
-		>
-			<ChevronDown size={iconSize} />
-		</button>
-	</div>
+	<!-- Custom increment/decrement buttons (hidden on mobile when responsive) -->
+	{#if !hideButtons}
+		<div class="absolute top-1/2 right-1 flex -translate-y-1/2 flex-col">
+			<button
+				type="button"
+				on:click={increment}
+				{disabled}
+				class="flex {buttonSizeClasses} items-center justify-center rounded-t border border-neutral-300 bg-white text-neutral-600 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
+			>
+				<ChevronUp size={iconSize} />
+			</button>
+			<button
+				type="button"
+				on:click={decrement}
+				{disabled}
+				class="flex {buttonSizeClasses} items-center justify-center rounded-b border border-t-0 border-neutral-300 bg-white text-neutral-600 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
+			>
+				<ChevronDown size={iconSize} />
+			</button>
+		</div>
+	{/if}
 </div>
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 ae29b12..c0f82f1 100644
--- a/src/routes/media-management/[databaseId]/quality-definitions/components/QualityDefinitionsForm.svelte
+++ b/src/routes/media-management/[databaseId]/quality-definitions/components/QualityDefinitionsForm.svelte
@@ -289,8 +289,8 @@
 		<p class="text-sm text-neutral-500 dark:text-neutral-400">{description}</p>
 	</div>
 	<div slot="right" class="flex items-center gap-2">
-		<!-- Unit selector -->
-		<div class="relative">
+		<!-- Unit selector (hidden on mobile) -->
+		<div class="relative hidden md:block">
 			<button
 				type="button"
 				on:click={() => (showUnitDropdown = !showUnitDropdown)}
@@ -427,6 +427,7 @@
 										min={0}
 										max={markers[1].value}
 										step={1}
+										responsive
 										onchange={() => syncToEntry(entry.quality_name)}
 									/>
 								</div>
@@ -442,6 +443,7 @@
 										min={markers[0].value}
 										max={markers[2].value}
 										step={1}
+										responsive
 										onchange={() => syncToEntry(entry.quality_name)}
 									/>
 								</div>
@@ -456,6 +458,7 @@
 										bind:value={markers[2].value}
 										min={markers[1].value}
 										step={1}
+										responsive
 										onchange={() => syncToEntry(entry.quality_name)}
 									/>
 								</div>