From 724983fe03cac592226508e25f12412e4f43f609 Mon Sep 17 00:00:00 2001
From: Erol Haagenrud <erol.haagenrud@envide.no>
Date: Wed, 19 Aug 2026 17:37:26 +0200
Subject: [PATCH] Fiks utslagsvalg i spillertabellen: select forsvinner aldri
 lenger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Funnet via brukers skjermopptak av forsøk på å endre én spillers
utslag -- en ikke-tilordnet rad viste kun en død strek, ingen
interaktiv kontroll, og et feilklikk på den tette avkrysningsboksen
satt brukeren fast. Utslagsvelgeren vises nå alltid; å velge et
utslag tilordner raden automatisk. Boks og select har også fått
tydelig mer avstand for å redusere feilklikk.
---
 CHANGELOG.md                                  | 43 +++++++++++
 .../components/tournament-players-table.tsx   | 74 ++++++++++---------
 2 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5d538f..56e1bf2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13187,3 +13187,46 @@ Neste steg:
     **Rullet ut 2026-08-19** -- bruker bekreftet. Ren frontend.
     `docker compose build teecup_frontend && up -d`, rene logger,
     200 OK.
+
+132. **Utslagsvalg i den nye spillertabellen -- reelt UX-hull, funnet via
+    video -- 2026-08-19.** Bruker lastet opp en skjermopptak: "Den viser
+    hvor vanskelig det er å velge utslag." Bilde-for-bilde-gjennomgang
+    (video konvertert til enkeltbilder med `ffmpeg`, installert lokalt
+    for anledningen) viste at bruker klikket presist på avkrysnings-
+    boksen til én rad (ville trolig bare endre utslaget hennes fra "55"
+    til "50"), som avkrysset raden helt av -- og satt deretter fast:
+    når en rad ikke er tilordnet runden viste cellen KUN en død strek
+    (`<span>—</span>`), ingen interaktiv kontroll. Eneste vei tilbake
+    var den 16px avkrysningsboksen, tett inntil selecten, lett å bomme
+    på. Bekreftet med et oppklaringsspørsmål til bruker (var det
+    "massetildel 55, overstyr noen til 50"-flyten som var problemet?)
+    -- bruker bekreftet at DET allerede fungerte (endre en allerede
+    avkrysset rads select direkte er upåvirket av denne bug'en), det
+    var spesifikt fastlåsingen etter et (feilaktig eller bevisst)
+    klikk på boksen som var hovedproblemet.
+
+    **Fiks** (`components/tournament-players-table.tsx`, `PlayerRow`
+    sin runde-celle): utslagsvelgeren vises nå ALLTID, aldri en død
+    strek. På en ikke-tilordnet rad vises den stiplet/nedtonet med
+    rundens standardutslag som forhåndsvalg -- å velge ET HVILKET SOM
+    HELST utslag der kaller `onToggleRound(..., true, teeId)` og
+    tilordner raden i samme handling, ingen egen boks-runde nødvendig.
+    Avkrysningsboksen er nå viklet i en egen `<label>` med større
+    klikkflate, og adskilt fra selecten med en synlig skillelinje
+    (`gap-1` + en 1px `bg-border`-strek) i stedet for kun `gap-1.5` --
+    reduserer sjansen for feilklikk mellom de to kontrollene.
+
+    **Verifisert i scratch** (mock-data, lokal `next dev` på port 3100,
+    IKKE mot kjørende `teecup_frontend`/`teecup_api` -- en midlertidig
+    forhåndsvisningsrute under `frontend/app/tmp-preview-tee-select-
+    x7q9/`, fjernet igjen etter verifisering): brukt Chrome DevTools MCP
+    til faktisk å klikke gjennom scenarioet. Bekreftet (1) massetildeling
+    fortsatt fungerer identisk, (2) å endre en allerede tilordnet rads
+    utslag direkte i selecten fungerer uendret, (3) den faktiske bug'en
+    er løst -- avkryssing av en rad beholder nå en fungerende select
+    (viser siste kjente utslag, stiplet stil), og å velge et utslag der
+    tilordner raden på nytt i ett klikk. Ingen konsollfeil. `tsc --noEmit`
+    rent, `vitest run` 55/55.
+
+    **Rullet ut 2026-08-19** -- bruker bekreftet. Ren frontend.
+    `docker compose build teecup_frontend && up -d`, rene logger, 200 OK.
diff --git a/frontend/components/tournament-players-table.tsx b/frontend/components/tournament-players-table.tsx
index cfce296..fc87fd9 100644
--- a/frontend/components/tournament-players-table.tsx
+++ b/frontend/components/tournament-players-table.tsx
@@ -480,43 +480,51 @@ function PlayerRow({
         const cell = cells[round.id]?.[player.participantId]
         const assigned = cell?.assigned ?? false
         const busy = busyRoundIds.includes(round.id)
+        const previewTeeId = cell?.teeId ?? defaultTees[round.id] ?? round.tees[0]?.id ?? ""
         return (
           <td key={round.id} className={TD}>
-            <div className="flex items-center gap-1.5 px-2">
-              <input
-                type="checkbox"
-                checked={assigned}
-                disabled={busy}
-                aria-label={`${player.playerName} spiller ${round.label}`}
+            <div className="flex items-center gap-1 px-2">
+              <label
+                className="flex shrink-0 cursor-pointer items-center py-2 pr-2"
                 title={assigned ? "Spiller runden" : "Spiller ikke runden"}
-                onChange={(e) => {
-                  const checked = e.target.checked
-                  const teeId = checked
-                    ? defaultTees[round.id] ?? round.tees[0]?.id ?? ""
-                    : cell?.teeId ?? round.tees[0]?.id ?? ""
-                  onToggleRound(round.id, player.participantId, checked, teeId)
-                }}
-                className="size-4 shrink-0 rounded border-border text-primary outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-              />
-              {assigned ? (
-                <select
-                  aria-label={`Utslag for ${player.playerName} i ${round.label}`}
-                  className="h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-1.5 text-xs text-foreground outline-none transition-colors hover:border-primary/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                  value={cell?.teeId ?? ""}
+              >
+                <input
+                  type="checkbox"
+                  checked={assigned}
                   disabled={busy}
-                  onChange={(e) => onChangeRoundTee(round.id, player.participantId, e.target.value)}
-                >
-                  {round.tees.map((tee) => (
-                    <option key={tee.id} value={tee.id}>
-                      {tee.name}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <span aria-hidden="true" className="flex-1 text-xs text-muted-foreground/60">
-                  —
-                </span>
-              )}
+                  aria-label={`${player.playerName} spiller ${round.label}`}
+                  onChange={(e) => {
+                    const checked = e.target.checked
+                    const teeId = checked ? previewTeeId : cell?.teeId ?? previewTeeId
+                    onToggleRound(round.id, player.participantId, checked, teeId)
+                  }}
+                  className="size-4 shrink-0 rounded border-border text-primary outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                />
+              </label>
+              <span aria-hidden="true" className="h-5 w-px shrink-0 bg-border" />
+              <select
+                aria-label={`Utslag for ${player.playerName} i ${round.label}`}
+                className={`h-7 min-w-0 flex-1 rounded-md border px-1.5 text-xs outline-none transition-colors hover:border-primary/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+                  assigned
+                    ? "border-border bg-background text-foreground"
+                    : "border-dashed border-border/70 bg-transparent text-muted-foreground"
+                }`}
+                value={previewTeeId}
+                disabled={busy}
+                onChange={(e) => {
+                  if (assigned) {
+                    onChangeRoundTee(round.id, player.participantId, e.target.value)
+                  } else {
+                    onToggleRound(round.id, player.participantId, true, e.target.value)
+                  }
+                }}
+              >
+                {round.tees.map((tee) => (
+                  <option key={tee.id} value={tee.id}>
+                    {tee.name}
+                  </option>
+                ))}
+              </select>
             </div>
           </td>
         )