piotr/innercontext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: uniform 2-col classification grid and fix effect profile label overflow

Browse source 
- 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>
This commit is contained in:
Piotr Oleszczyk 2026-02-27 15:55:58 +01:00
parent c09acc7c81
commit c132bc836f
1 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/lib/components/ProductForm.svelte
View file

@ -245,8 +245,9 @@
<!-- ── Classification ────────────────────────────────────────────────────── -->
<Card>
<CardHeader><CardTitle>Classification</CardTitle></CardHeader>
<CardContent class="space-y-4">
<div class="space-y-2">
<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)}>
@ -259,7 +260,6 @@
</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,7 +299,6 @@
</SelectContent>
</Select>
</div>
</div>
<div class="space-y-2">
<Label>Absorption speed</Label>
@ -313,6 +312,7 @@
</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>