From c132bc836f4e9e5b8b600954069129e94ac5b9a2 Mon Sep 17 00:00:00 2001
From: Piotr Oleszczyk <piotr@oleszczyk.eu>
Date: Fri, 27 Feb 2026 15:55:58 +0100
Subject: [PATCH] fix: uniform 2-col classification grid and fix effect profile
 label overflow

- Classification: replace fragmented layout (full-width + 3-col + full-width)
  with a single 2-column grid; Category spans full width via col-span-2
- Effect profile: replace flex + fixed w-40 label with CSS grid using
  minmax(7rem,10rem) label column to prevent overflow at narrow viewports

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/ProductForm.svelte     | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/ProductForm.svelte b/frontend/src/lib/components/ProductForm.svelte
index 87218a4..031b3b0 100644
--- a/frontend/src/lib/components/ProductForm.svelte
+++ b/frontend/src/lib/components/ProductForm.svelte
@@ -245,21 +245,21 @@
 <!-- ── Classification ────────────────────────────────────────────────────── -->
 <Card>
 	<CardHeader><CardTitle>Classification</CardTitle></CardHeader>
-	<CardContent class="space-y-4">
-		<div class="space-y-2">
-			<Label>Category *</Label>
-			<input type="hidden" name="category" value={category} />
-			<Select type="single" value={category} onValueChange={(v) => (category = v)}>
-				<SelectTrigger>{category ? lbl(category) : 'Select category'}</SelectTrigger>
-				<SelectContent>
-					{#each categories as cat}
-						<SelectItem value={cat}>{lbl(cat)}</SelectItem>
-					{/each}
-				</SelectContent>
-			</Select>
-		</div>
+	<CardContent>
+		<div class="grid grid-cols-2 gap-4">
+			<div class="col-span-2 space-y-2">
+				<Label>Category *</Label>
+				<input type="hidden" name="category" value={category} />
+				<Select type="single" value={category} onValueChange={(v) => (category = v)}>
+					<SelectTrigger>{category ? lbl(category) : 'Select category'}</SelectTrigger>
+					<SelectContent>
+						{#each categories as cat}
+							<SelectItem value={cat}>{lbl(cat)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
 
-		<div class="grid grid-cols-3 gap-4">
 			<div class="space-y-2">
 				<Label>Time *</Label>
 				<input type="hidden" name="recommended_time" value={recommendedTime} />
@@ -299,19 +299,19 @@
 					</SelectContent>
 				</Select>
 			</div>
-		</div>
 
-		<div class="space-y-2">
-			<Label>Absorption speed</Label>
-			<input type="hidden" name="absorption_speed" value={absorptionSpeed} />
-			<Select type="single" value={absorptionSpeed} onValueChange={(v) => (absorptionSpeed = v)}>
-				<SelectTrigger>{absorptionSpeed ? lbl(absorptionSpeed) : 'Select speed'}</SelectTrigger>
-				<SelectContent>
-					{#each absorptionSpeeds as s}
-						<SelectItem value={s}>{lbl(s)}</SelectItem>
-					{/each}
-				</SelectContent>
-			</Select>
+			<div class="space-y-2">
+				<Label>Absorption speed</Label>
+				<input type="hidden" name="absorption_speed" value={absorptionSpeed} />
+				<Select type="single" value={absorptionSpeed} onValueChange={(v) => (absorptionSpeed = v)}>
+					<SelectTrigger>{absorptionSpeed ? lbl(absorptionSpeed) : 'Select speed'}</SelectTrigger>
+					<SelectContent>
+						{#each absorptionSpeeds as s}
+							<SelectItem value={s}>{lbl(s)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
 		</div>
 	</CardContent>
 </Card>
@@ -473,8 +473,8 @@
 		<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
 			{#each effectFields as field}
 				{@const key = field.key as keyof typeof effectValues}
-				<div class="flex items-center gap-3">
-					<span class="w-40 shrink-0 text-xs text-muted-foreground">{field.label}</span>
+				<div class="grid grid-cols-[minmax(7rem,10rem)_1fr_1.25rem] items-center gap-3">
+					<span class="text-xs text-muted-foreground">{field.label}</span>
 					<input
 						type="range"
 						name="effect_{field.key}"
@@ -482,9 +482,9 @@
 						max="5"
 						step="1"
 						bind:value={effectValues[key]}
-						class="flex-1 accent-primary"
+						class="accent-primary"
 					/>
-					<span class="w-4 text-center font-mono text-sm">{effectValues[key]}</span>
+					<span class="text-center font-mono text-sm">{effectValues[key]}</span>
 				</div>
 			{/each}
 		</div>