-
-
- {statusLabel ? (
- <>
-
- {statusLabel}
-
- {isClosed ? (
-
- Ferdig
-
- ) : (
-
- {holesPlayed} hull spilt
- {holesRemaining > 0 && isDormie && " · dormie"}
-
- )}
-
- ) : (
-
Ingen hull spilt ennå
- )}
+ {/* CSS Grid, ikke absolutt-posisjonert overlegg (2026-07-29-fiks) --
+ en tidligere versjon la statusen som en absolutt sentrert boks OPPÅ
+ navnetekst, som kunne overlappe et langt navn på smale skjermer.
+ Med grid-kolonner `minmax(0,X fr) auto minmax(0,Y fr)` reserverer
+ nettleseren ALLTID nøyaktig midt-kolonnens egen bredde til status-
+ boksen -- soneandelen forblir proporsjonal (X:Y), men kan aldri
+ overlappe, og lange navn trunkeres i stedet (samme `truncate`-
+ mekanisme som ellers). */}
+
+
+
+
+
+
+ {statusLabel ? (
+ <>
+
+ {statusLabel}
+
+ {isClosed ? (
+
+ Ferdig
+
+ ) : (
+
+ {holesPlayed} hull spilt
+ {holesRemaining > 0 && isDormie && " · dormie"}
+
+ )}
+
+ ) : (
+ Ingen hull spilt ennå
+ )}
+
+
+
+
-
)
diff --git a/frontend/components/round-scorecard.tsx b/frontend/components/round-scorecard.tsx
index f057b47..984fdab 100644
--- a/frontend/components/round-scorecard.tsx
+++ b/frontend/components/round-scorecard.tsx
@@ -443,42 +443,121 @@ function computeRunning(results: ("a" | "b" | "halved")[], totalHoles: number):
type HeaderIdentity = { name: string; hcp: number | null }
-function IdentitySide({ identity, side }: { identity: HeaderIdentity; side: "a" | "b" }) {
+// Territorium-bar (2026-07-29, brukerens eget forslag: den ledende sidens
+// sone strekker seg proporsjonalt forbi midtlinjen inn på motstanderens
+// halvdel, i stedet for en statisk 50/50-boks med tekst i midten). Ved AS
+// eller ingen hull avgjort ennå er begge soner like store og nøytralt
+// farget. Egen lokal kopi av samme idé som round-detail.tsx sin
+// FormatResultPanel, per prosjektets "én fil, én kopi"-konvensjon.
+function leadZoneFraction(lead: number, totalHoles: number): number {
+ if (totalHoles <= 0) return 0.5
+ const fraction = 0.5 + (lead / totalHoles) * 0.5
+ return Math.min(0.82, Math.max(0.18, fraction))
+}
+
+function LeadZone({ identity, side, dominant }: { identity: HeaderIdentity; side: "a" | "b"; dominant: boolean }) {
+ const textTone = dominant ? (side === "a" ? "text-primary-foreground" : "text-brand-orange-foreground") : "text-foreground"
+ const subTone = dominant
+ ? side === "a"
+ ? "text-primary-foreground/75"
+ : "text-brand-orange-foreground/75"
+ : "text-muted-foreground"
+ // Boksen STREKKER SEG (ingen items-start/items-end) -- ellers sizes den
+ // etter innholdets egen bredde, ikke sonens faktiske tildelte bredde, og
+ // kan visuelt lekke inn i midt-kolonnen på smale skjermer. Justering skjer
+ // med justify-start/justify-end + text-align inni en boks som alltid har
+ // full, korrekt bredde -- truncate virker da presist.
return (
-
-
-
-
{identity.name}
+
+
+ {!dominant && (
+
+ )}
+ {identity.name}
{identity.hcp !== null && (
-
HCP {identity.hcp}
+
+ HCP {identity.hcp}
+
)}
)
}
-function CenterBadge({ state, holesPlayed }: { state: RunningState | null; holesPlayed: number }) {
- if (!state) {
- return (
-
- Ingen hull spilt ennå
-
- )
- }
- const toneClass = state.tone === "a" ? "text-primary" : state.tone === "b" ? "text-brand-orange" : "text-foreground"
+function LeadBar({
+ identityA,
+ identityB,
+ state,
+ holesPlayed,
+ totalHoles,
+}: {
+ identityA: HeaderIdentity
+ identityB: HeaderIdentity
+ state: RunningState | null
+ holesPlayed: number
+ totalHoles: number
+}) {
+ const lead = state?.lead ?? 0
+ const tone = state?.tone ?? "neutral"
+ const widthA = state ? leadZoneFraction(lead, totalHoles) * 100 : 50
+ const widthB = 100 - widthA
+ const zoneAClass = tone === "a" ? "bg-primary" : tone === "b" ? "bg-primary/12" : "bg-muted"
+ const zoneBClass = tone === "b" ? "bg-brand-orange" : tone === "a" ? "bg-brand-orange/12" : "bg-muted"
return (
-
-
{state.label}
- {state.isClosed ? (
-
- Ferdig
-
- ) : (
-
{holesPlayed} hull spilt
- )}
+ // CSS Grid, ikke absolutt overlegg (2026-07-29-fiks, se round-detail.tsx
+ // sin FormatResultPanel for full begrunnelse) -- midt-kolonnen (status)
+ // er `auto`-bredde, de to sonene `minmax(0, X fr)` -- reserverer alltid
+ // nøyaktig plass til statusboksen, kan aldri overlappe et langt navn.
+
+
+
+
+
+
+ {state ? (
+ <>
+
+ {state.label}
+
+ {state.isClosed ? (
+
+ Ferdig
+
+ ) : (
+ {holesPlayed} hull spilt
+ )}
+
+ ) : (
+ Ingen hull spilt ennå
+ )}
+
+
+
+
+
)
}
@@ -538,11 +617,13 @@ function MatchScorecardGrid({
return (
-
-
-
-
-
+
{decidedHoles.length === 0 ? (
diff --git a/frontend/components/session-scorecard.tsx b/frontend/components/session-scorecard.tsx
index 43de042..6c9a34d 100644
--- a/frontend/components/session-scorecard.tsx
+++ b/frontend/components/session-scorecard.tsx
@@ -967,24 +967,62 @@ function unitGross(scorecard: ApiScorecard, unit: Unit, holeNumber: number): num
return entry ? entry.gross_strokes : null
}
+// Territorium-bar (2026-07-29, brukerens eget forslag: den ledende sidens
+// sone strekker seg proporsjonalt forbi midtlinjen inn på motstanderens
+// halvdel). Ulikt round-detail.tsx/round-scorecard.tsx sin primary/brand-
+// orange-versjon bruker denne lagets FAKTISKE `team.color` (vilkårlig hex,
+// samme som SegmentedBar i tournament-leaderboard.tsx) -- dominant sone får
+// hvit tekst (samme kontrastvalg som SegmentedBar), lys sone en svak
+// gjennomsiktig tone av samme farge med vanlig tema-tekst.
+function leadZoneFraction(lead: number, totalHoles: number): number {
+ if (totalHoles <= 0) return 0.5
+ const fraction = 0.5 + (lead / totalHoles) * 0.5
+ return Math.min(0.82, Math.max(0.18, fraction))
+}
+
function IdentityBlock({
name,
hcp,
color,
side,
+ dominant,
}: {
name: string
hcp: number | null
color: string
side: "a" | "b"
+ dominant: boolean
}) {
+ // Boksen STREKKER SEG (ingen items-start/items-end) -- ellers sizes den
+ // etter innholdets egen bredde, ikke sonens faktiske tildelte bredde, og
+ // kan visuelt lekke inn i midt-kolonnen på smale skjermer. Justering skjer
+ // med justify-start/justify-end + text-align inni en boks som alltid har
+ // full, korrekt bredde -- truncate virker da presist.
return (
-
-
-
-
{name}
+
+
+ {!dominant && }
+
+ {name}
+
- {hcp !== null &&
HCP {hcp}}
+ {hcp !== null && (
+
+ HCP {hcp}
+
+ )}
)
}
@@ -1026,38 +1064,73 @@ function TournamentMatchGrid({
const identityA = headerIdentity("a")
const identityB = headerIdentity("b")
+ const lead = lastState?.lead ?? 0
+ const tone = lastState?.tone ?? "neutral"
+ const widthA = lastState ? leadZoneFraction(lead, totalHoles) * 100 : 50
+ const widthB = 100 - widthA
+ const zoneAStyle =
+ tone === "a"
+ ? { backgroundColor: identityA.color }
+ : tone === "b"
+ ? { backgroundColor: `color-mix(in srgb, ${identityA.color} 15%, transparent)` }
+ : undefined
+ const zoneBStyle =
+ tone === "b"
+ ? { backgroundColor: identityB.color }
+ : tone === "a"
+ ? { backgroundColor: `color-mix(in srgb, ${identityB.color} 15%, transparent)` }
+ : undefined
return (
-
-
-
- {lastState ? (
- <>
-
- {lastState.label}
-
- {lastState.isClosed ? (
-
- Ferdig
-
- ) : (
-
- {decidedHoles.length} hull spilt
-
- )}
-
- ) : (
-
Ingen hull spilt ennå
- )}
+ {/* CSS Grid, ikke absolutt overlegg (2026-07-29-fiks, se round-detail.tsx
+ sin FormatResultPanel for full begrunnelse) -- midt-kolonnen (status)
+ er `auto`-bredde, de to sonene `minmax(0, X fr)` -- reserverer alltid
+ nøyaktig plass til statusboksen, kan aldri overlappe et langt navn. */}
+
+
+
+
+
+
+ {lastState ? (
+ <>
+
+ {lastState.label}
+
+ {lastState.isClosed ? (
+
+ Ferdig
+
+ ) : (
+
+ {decidedHoles.length} hull spilt
+
+ )}
+
+ ) : (
+ Ingen hull spilt ennå
+ )}
+
+
+
+
-