From 17e47930c01b9c8a3aca4b2c8ee7c22ad136f121 Mon Sep 17 00:00:00 2001
From: Erol Haagenrud <erol.haagenrud@envide.no>
Date: Tue, 11 Aug 2026 08:57:23 +0200
Subject: [PATCH] ChoiceRow: fast 3-kolonners rutenett i stedet for flex-wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/components/round-detail.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/components/round-detail.tsx b/frontend/components/round-detail.tsx
index 9463c14..babb088 100644
--- a/frontend/components/round-detail.tsx
+++ b/frontend/components/round-detail.tsx
@@ -6865,7 +6865,15 @@ function ChoiceRow({
   return (
     <div className="flex flex-col gap-2">
       <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) => {
           const selected = value === opt.value
           return (
@@ -6876,7 +6884,7 @@ function ChoiceRow({
               onClick={() => onChange(opt.value)}
               aria-pressed={selected}
               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",
                 readOnly && !selected && "opacity-40",
               )}