diff --git a/frontend/components/round-detail.tsx b/frontend/components/round-detail.tsx index babb088..fc316cf 100644 --- a/frontend/components/round-detail.tsx +++ b/frontend/components/round-detail.tsx @@ -6577,30 +6577,49 @@ function WizardSection({ title, children }: { title: string; children: React.Rea // finnes mer innhold under fold-linjen -- og skjuler seg av seg selv idet man // har scrollet helt ned. Fanger både resize og innholdsendringer (ulikt // stat_level/par gir ulik høyde) via en ResizeObserver på selve scrollboksen. +// Høyden (px) på fade-/piloverlayet under -- MÅ matche spacer-diven sin +// h-16 og trekkes fra i hasMore-utregningen, se begrunnelse der. +const SCROLL_FADE_HEIGHT_PX = 64 + function ScrollFade({ children, className }: { children: React.ReactNode; className?: string }) { - const ref = useRef(null) + const scrollRef = useRef(null) + const contentRef = useRef(null) const [hasMore, setHasMore] = useState(false) useEffect(() => { - const el = ref.current - if (!el) return + const scrollEl = scrollRef.current + const contentEl = contentRef.current + if (!scrollEl || !contentEl) return const update = () => { - // 4px slingring: unngår at en sub-piksel-rest holder hintet i live - // når man i praksis ER nederst. - setHasMore(el.scrollTop + el.clientHeight < el.scrollHeight - 4) + // Trekker fra spacer-divens egen høyde (samme SCROLL_FADE_HEIGHT_PX) + // i tillegg til 4px slingring -- uten dette ville "hasMore" blitt + // sant utelukkende fordi spaceren selv gjør scrollHeight større, selv + // når ALT ekte innhold allerede er synlig (falskt positivt hint). + setHasMore(scrollEl.scrollTop + scrollEl.clientHeight < scrollEl.scrollHeight - SCROLL_FADE_HEIGHT_PX - 4) } update() - el.addEventListener("scroll", update, { passive: true }) + scrollEl.addEventListener("scroll", update, { passive: true }) + // Observerer INNHOLDS-diven, IKKE scroll-beholderen selv -- + // beholderens egen boks-størrelse er fast (flex-1, bundet av + // veiviserens layout), den endrer seg ALDRI når man bytter steg. Uten + // dette ble "hasMore" aldri regnet på nytt ved stegbytte -- den + // sprettende pilen dukket rett og slett ikke opp på steg som faktisk + // trengte scrolling (f.eks. "Retning"-steget med kølle-rutenett). const ro = new ResizeObserver(update) - ro.observe(el) + ro.observe(contentEl) return () => { - el.removeEventListener("scroll", update) + scrollEl.removeEventListener("scroll", update) ro.disconnect() } }, []) return (
-
- {children} +
+
{children}
+ {/* Usynlig buffer, SAMME høyde som fade-/piloverlayet -- garanterer at + overlayet aldri dekker et ekte, interaktivt element (f.eks. en + retningsknapp med sin egen pil-ikon nederst i steget). Uten denne + kunne den sprettende pilen havne rett oppå en annen pil. */} + {/* Rent dekorativt -- selve scrollingen er fullt mulig uten dette. */}