Leaderboard: fyller full bredde + autoscroll fungerer på storskjerm
StrokePlayLeaderboard var bygget for å skalere opp på lg:-brytningspunkt, men satt inni en delt max-w-4xl-wrapper som aldri lot den. Samme brytningspunkt fjernet skrolle-taket helt, så autoscroll-tickeren fikk aldri noe å bevege for et stort felt. Begge rettet -- ren visuell polish kommer i en oppfølgende V0-redesign av samme komponent. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
207750acba
commit
eeb7e9fb29
3 changed files with 60 additions and 4 deletions
35
CHANGELOG.md
35
CHANGELOG.md
|
|
@ -12405,3 +12405,38 @@ Neste steg:
|
|||
stacken revet ned.
|
||||
|
||||
**Rullet ut:** venter på bekreftelse.
|
||||
|
||||
111. **To bugfikser i individuell-turnering-leaderboardet (bredde +
|
||||
autoscroll) — 2026-08-18.** Bruker rapporterte at leaderboardet "ser
|
||||
forferdelig ut", ikke fyller hele skjermbredden, og ikke autoscroller.
|
||||
Undersøkt (Explore-agent) FØR fiksing:
|
||||
|
||||
**Bredde:** `StrokePlayLeaderboard` (bygget 2026-08-04, allerede med
|
||||
egne `lg:`-brytningspunkt for storskjerm-utfylling) satt inni
|
||||
`individual-tournament-detail.tsx` sin DELTE `max-w-4xl`-hovedwrapper
|
||||
-- samme wrapper som skjema-tunge Oppsett-/Presentasjon-fanene bruker.
|
||||
Komponenten fikk dermed ALDRI sjansen til å fylle en stor skjerm, selv
|
||||
om den var bygget og testet isolert for akkurat det. Fikset:
|
||||
`<main>` sin breddebegrensning er nå betinget av aktiv fane --
|
||||
`max-w-[110rem]` kun for leaderboard-fanen, uendret `max-w-4xl` for de
|
||||
tre andre.
|
||||
|
||||
**Autoscroll:** eksisterende ticker-logikk (`requestAnimationFrame`
|
||||
+ `scrollTop`) var reell, ikke fiktiv -- men skrolle-containeren
|
||||
byttet til `lg:max-h-none lg:overflow-visible` på store skjermer, ut
|
||||
fra en (feilaktig, for et stort felt) antakelse om at hele tabellen
|
||||
alltid ville få plass uten skrolling der. Uten noen skrollbar
|
||||
differanse (`scrollHeight - clientHeight ≤ 1`) ble ticker-loopen en
|
||||
permanent no-op -- "Rull automatisk"-knappen vekslet kun tilstand,
|
||||
ingen synlig bevegelse. Fikset: et vindu-relativt tak
|
||||
(`lg:max-h-[calc(100vh-18rem)]`) på ALLE bredder i stedet, aldri
|
||||
`overflow-visible` -- et lite felt får uansett plass (samme
|
||||
sluttresultat som før), et stort felt får nå en ekte skrollbar flate.
|
||||
|
||||
**Verifisert:** `tsc --noEmit` rent, `vitest run` 55/55. Ingen
|
||||
scratch-browserrunde denne gangen -- begge er smale, mekaniske
|
||||
Tailwind-/grense-justeringer, og selve VISUELLE polishen er uansett
|
||||
bevisst utsatt til en kommende V0-redesign av samme komponent
|
||||
(samme brukerforespørsel, se eget notat/prompt levert samme dag).
|
||||
|
||||
**Rullet ut:** venter på bekreftelse.
|
||||
|
|
|
|||
|
|
@ -780,7 +780,20 @@ export function IndividualTournamentDetail({
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto w-full max-w-4xl flex-1 px-5 py-6 sm:py-8">
|
||||
{/* Leaderboard-fanen er BEVISST unntatt fra den delte 4xl-bredden
|
||||
(2026-08-18, brukerrapport: "fyller ikke hele bredden på skjermen")
|
||||
-- StrokePlayLeaderboard er selv bygget for å skalere opp og fylle
|
||||
en stor skjerm (egne `lg:`-brytningspunkt-klasser, se komponentens
|
||||
egen kommentar om "storskjerm uten skrolling"), men satt inni denne
|
||||
delte 4xl-wrapperen (896px, samme wrapper som skjema-tunge Oppsett/
|
||||
Presentasjon-fanene bruker) fikk den aldri sjansen til det -- felles
|
||||
med resten av siden siden komponenten ble bygget/testet isolert. */}
|
||||
<main
|
||||
className={cn(
|
||||
"mx-auto w-full flex-1 px-5 py-6 sm:py-8",
|
||||
tab === "leaderboard" ? "max-w-[110rem]" : "max-w-4xl",
|
||||
)}
|
||||
>
|
||||
{error && (
|
||||
<div className="mb-5 rounded-2xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm font-medium text-destructive">
|
||||
{error}
|
||||
|
|
|
|||
|
|
@ -297,13 +297,21 @@ export function StrokePlayLeaderboard({
|
|||
</div>
|
||||
|
||||
{/* One scroll container drives both frozen-column horizontal scroll (narrow
|
||||
screens) and the vertical ticker. On large "storskjerm" viewports the
|
||||
cap is removed so the whole board fits with no scrolling. */}
|
||||
screens) and the vertical ticker. RETTET 2026-08-18 (brukerrapport:
|
||||
"autoscroller ikke") -- `lg:max-h-none lg:overflow-visible` fjernet
|
||||
taket HELT på store skjermer, ut fra en antakelse om at hele feltet
|
||||
alltid ville få plass der. For et stort felt (mange spillere) stemte
|
||||
ikke det -- containeren fikk aldri noe å skrolle PÅ, så
|
||||
"Rull automatisk" vekslet kun knappe-tilstanden uten synlig
|
||||
bevegelse. Nå: et vindu-relativt tak på ALLE bredder (aldri
|
||||
`overflow-visible`) -- et lite felt får uansett plass innenfor taket
|
||||
(ingen skrolling da heller, samme sluttresultat som før), et stort
|
||||
felt får en ekte skrollbar flate autoscroll faktisk kan bevege. */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
tabIndex={0}
|
||||
aria-label="Resultatliste"
|
||||
className="relative max-h-[24rem] overflow-auto outline-none md:max-h-[32rem] lg:max-h-none lg:overflow-visible"
|
||||
className="relative max-h-[24rem] overflow-auto outline-none md:max-h-[32rem] lg:max-h-[calc(100vh-18rem)]"
|
||||
>
|
||||
<table className="w-full border-separate border-spacing-0 text-left tabular-nums">
|
||||
<colgroup>
|
||||
|
|
|
|||
Loading…
Reference in a new issue