Fiks: kart-steget kollapset til 0px høyde (mapbox-gl.css CSS-krasj)

Produksjonsbug: "Kunne ikke laste kartet" for alle, bekreftet av bruker
etter oppfølgingsspørsmål ("alle tre" -- kart-valg, resultat-forhånds-
visning, delt bilde).

Rotårsak: mapbox-gl.css sin egen ".mapboxgl-map { position: relative }"
overstyrte Tailwind sin "absolute"-klasse på kart-beholderen (samme
klassenavn Mapbox GL JS legger til ved init, senere i CSS-cascaden).
Så snart position ikke lenger var absolute, mistet inset-0 all effekt
på størrelsen -- beholderen kollapset til height:0, kartet lastet helt
fint (style/tiles/events alle 200/204) men ble klippet vekk, usynlig.
Rettet ved å bytte til h-full w-full, som løser størrelsen via prosent-
arv uavhengig av hvilken position-verdi som vinner.

Kunne ikke fanges opp i tidligere scratch-tester siden Mapbox sin
URL-restriksjon alltid avviste localhost-scratch-opprinnelser før
kartet fikk lastet/rendret. Verifisert denne runden ved å overstyre
Referer-headeren for å simulere det ekte domenet.

Bygget i samme runde (ikke opprinnelig planlagt, brukerønske): en
client-side satellitt-forhåndsvisning i resultatsteget før lagring, med
det offentlige tokenet direkte som <img src> mot Mapbox Static Images
API.

Se CHANGELOG.md punkt 51 for full diagnose, inkl. en separat snubletråd
i mitt eget scratch-testverktøy (grep uten ^-anker matchet en
kommentarlinje) og en ekte service-worker-cache-fallgruve funnet
underveis.

frontend/components/shot/map-point-picker.tsx

@@ -78,8 +78,20 @@ export function MapPointPicker({ onConfirm }: { onConfirm: (lngLat: LngLat) => v
   return (
     <div className="flex h-full flex-col">
       <div className="relative flex-1">
-        {/* Map canvas host — kept mounted for the map's whole lifetime. */}
-        <div ref={containerRef} className="absolute inset-0" aria-label="Satellittkart" role="application" />
+        {/* Map canvas host — kept mounted for the map's whole lifetime.
+            `h-full w-full`, IKKE `absolute inset-0`: mapbox-gl.css sin egen
+            `.mapboxgl-map { position: relative }`-regel overstyrer en
+            `absolute`-Tailwind-klasse her (samme klasse-navn, senere i
+            cascade siden mapbox-gl.css importeres i denne komponentfilen)
+            -- når posisjonen dermed blir `relative` i stedet for
+            `absolute`, mister `inset-0` all effekt på størrelsen (den
+            styrer kun posisjon/størrelse for absolutt/fixed-plasserte
+            elementer), og beholderen kollapser til 0 høyde uansett hvilken
+            posisjonsverdi som vinner kappløpet. `h-full`/`w-full` løser
+            størrelsen via prosent-arv i stedet, som fungerer likt for
+            både `relative` og `absolute`. Reell bug funnet 2026-08-08,
+            se CHANGELOG.md. */}
+        <div ref={containerRef} className="absolute inset-0 h-full w-full" aria-label="Satellittkart" role="application" />
 
         {!loaded && !error ? (
           <div className="absolute inset-0 flex items-center justify-center bg-background">

frontend/components/shot/shot-measurement-sheet.tsx

@@ -143,6 +143,17 @@ export function ShotMeasurementSheet({
   const distance =
     typeof distanceMeters === "number" ? distanceMeters : previewDistance(startPoint, endPoint)
 
+  // Forhåndsvisning av satellittutsnittet FØR lagring (brukerønske
+  // 2026-08-08, ikke opprinnelig planlagt -- selve DELINGEN genererer sitt
+  // eget, server-side bilde med samme markører+linje uavhengig av dette).
+  // Bygget client-side med det OFFENTLIGE tokenet (trygt i nettleseren,
+  // URL-restriktert) -- ingen server-tur-retur nødvendig kun for en
+  // forhåndsvisning.
+  const previewUrl =
+    startPoint && endPoint && process.env.NEXT_PUBLIC_MAPBOX_TOKEN
+      ? `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/static/pin-s-a+ff5a1f(${startPoint.lng},${startPoint.lat}),pin-s-b+2f7a3f(${endPoint.lng},${endPoint.lat})/auto/500x300@2x?padding=50&access_token=${process.env.NEXT_PUBLIC_MAPBOX_TOKEN}`
+      : null
+
   // Prefill the (editable) share text once the result step is reached.
   useEffect(() => {
     if (step === "result" && !shareEdited.current) {
@@ -353,6 +364,14 @@ export function ShotMeasurementSheet({
 
         {step === "result" ? (
           <div className="mx-auto flex max-w-md flex-col gap-6 pt-2">
+            {previewUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element -- ekstern Mapbox-URL, ikke next/image-verdt
+              <img
+                src={previewUrl || "/placeholder.svg"}
+                alt="Satellittutsnitt av slaget, med start- og sluttpunkt markert"
+                className="w-full rounded-2xl border border-border object-cover"
+              />
+            ) : null}
             <div className="flex flex-col items-center gap-1 rounded-2xl border border-border bg-card p-6">
               <span className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                 Målt lengde