envide/teecup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ChoiceRow: fast 3-kolonners rutenett i stedet for flex-wrap

Browse source 
Avstand første putt sine seks alternativer visste seg som 5+1 (ujevn
wrap basert på tekstbredde), lite brukervennlig. Fast grid-cols-3 gir
et forutsigbart 3+3-oppsett -- visuelt uendret for de fire andre
ChoiceRow-brukene i filen (alle har nøyaktig 3 valg fra før).
Browserverifisert (lys+mørk, mobil viewport). Ikke deployet ennå.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Erol Haagenrud 2026-08-11 08:57:23 +02:00
parent 3db00e72db
commit 17e47930c0
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/components/round-detail.tsx
View file

@ -6865,7 +6865,15 @@ function ChoiceRow({
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-base font-semibold text-foreground">{label}</span> <span className="text-base font-semibold text-foreground">{label}</span>
<div className="flex flex-wrap gap-2"> {/* Fast 3-kolonners rutenett (2026-08-11, brukertilbakemelding) --
IKKE flex-wrap lenger. flex-wrap+flex-1 pakket knappene så tett
content-bredden tillot (5 knapper på rad 1, 1 alene på rad 2 for
"Avstand første putt" sine seks alternativer) i stedet for en
forutsigbar, jevn oppstilling. Alle fire andre ChoiceRow-bruken
i denne filen har nøyaktig 3 valg hver, så dette er visuelt
identisk for dem (én rad à tre) -- kun 6-alternativs-tilfellet
endrer seg (2 rader à tre, i stedet for 5+1). */}
<div className="grid grid-cols-3 gap-2">
{options.map((opt) => { {options.map((opt) => {
const selected = value === opt.value const selected = value === opt.value
return ( return (
@ -6876,7 +6884,7 @@ function ChoiceRow({
onClick={() => onChange(opt.value)} onClick={() => onChange(opt.value)}
aria-pressed={selected} aria-pressed={selected}
className={cn( className={cn(
"flex min-h-12 flex-1 items-center justify-center rounded-2xl border px-4 text-base font-bold transition-colors disabled:opacity-100", "flex min-h-12 items-center justify-center rounded-2xl border px-2 text-base font-bold transition-colors disabled:opacity-100",
selected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-foreground hover:bg-accent/50", selected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-foreground hover:bg-accent/50",
readOnly && !selected && "opacity-40", readOnly && !selected && "opacity-40",
)} )}