From 4d11b1e136e77545cc4343d376c07e2ee5188cbb Mon Sep 17 00:00:00 2001 From: hiyach28 Date: Tue, 4 Aug 2026 11:32:11 +0000 Subject: [PATCH 1/3] [Programs] Fix LFX Programs page sidebar scroll offset and layout Signed-off-by: hiyach28 --- src/collections/programs/Programs.style.js | 9 ++++++++ .../programs/lfx-2026/LfxPageNav.js | 22 ++++++++++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/collections/programs/Programs.style.js b/src/collections/programs/Programs.style.js index a364c363ac528b..6bbd26c1d2c898 100644 --- a/src/collections/programs/Programs.style.js +++ b/src/collections/programs/Programs.style.js @@ -1,6 +1,15 @@ import styled from "styled-components"; +export const NAVBAR_HEIGHT = 80; +export const PROGRAM_SECTION_GAP = 20; + +export const LFX_SCROLL_OFFSET = NAVBAR_HEIGHT + PROGRAM_SECTION_GAP; + export const ProgramsWrapper = styled.div` + [id] { + scroll-margin-top: calc(${LFX_SCROLL_OFFSET}px - 5rem); + } + a { color: ${(props) => props.theme.keppelColor}; overflow-wrap: break-word; diff --git a/src/collections/programs/lfx-2026/LfxPageNav.js b/src/collections/programs/lfx-2026/LfxPageNav.js index 7ee4e2ece476a5..45c3f27a31f2e3 100644 --- a/src/collections/programs/lfx-2026/LfxPageNav.js +++ b/src/collections/programs/lfx-2026/LfxPageNav.js @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import { ArrowUpwardIcon } from "@sistent/sistent"; import styled from "styled-components"; +import { LFX_SCROLL_OFFSET } from "../Programs.style.js"; const NavCard = styled.nav` position: sticky; @@ -11,7 +12,7 @@ const NavCard = styled.nav` background: ${(props) => props.theme.grey1D1D1DToGreyFAFAFA}; border: 1px solid ${(props) => props.theme.grey1D1817ToGreyE6E6E6}; border-radius: 7px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 1rem; z-index: 99; @media (max-width: 900px) { @@ -85,7 +86,7 @@ const LfxPageNav = ({ items }) => { let current = ""; items.forEach((item) => { const el = document.querySelector(item.href); - if (el && window.scrollY >= el.offsetTop - 140) { + if (el && window.scrollY >= el.offsetTop - LFX_SCROLL_OFFSET) { current = item.href; } }); @@ -95,6 +96,15 @@ const LfxPageNav = ({ items }) => { return () => window.removeEventListener("scroll", onScroll); }, [items]); + const handleNavClick = (e, href) => { + e.preventDefault(); + const el = document.querySelector(href); + if (el) { + el.scrollIntoView({ behavior: "smooth", block: "start" }); + window.history.pushState(null, "", href); + } + }; + return ( <> @@ -102,7 +112,13 @@ const LfxPageNav = ({ items }) => { {items.map((item) => (
  • - {item.label} + handleNavClick(e, item.href)} + > + {item.label} +
    • ))}     From 2888a16532a879bb40bcad8447224571b508e953 Mon Sep 17 00:00:00 2001 From: hiyach28 Date: Tue, 4 Aug 2026 15:01:24 +0000 Subject: [PATCH 2/3] [Programs] Address review: preserve native link behavior and deduplicate pushState - Guard handleNavClick so Ctrl/Cmd/Shift-clicks fall through to the browser native behavior (open in new tab / new window) instead of being swallowed by preventDefault. - Skip window.history.pushState when the hash is already the current URL hash, preventing duplicate Back/Forward history entries on repeated clicks to the same section. - Strip trailing whitespace from Programs.style.js. Signed-off-by: hiyach28 --- src/collections/programs/Programs.style.js | 2 +- src/collections/programs/lfx-2026/LfxPageNav.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/collections/programs/Programs.style.js b/src/collections/programs/Programs.style.js index 6bbd26c1d2c898..9a3213b2fbbfa7 100644 --- a/src/collections/programs/Programs.style.js +++ b/src/collections/programs/Programs.style.js @@ -9,7 +9,7 @@ export const ProgramsWrapper = styled.div` [id] { scroll-margin-top: calc(${LFX_SCROLL_OFFSET}px - 5rem); } - + a { color: ${(props) => props.theme.keppelColor}; overflow-wrap: break-word; diff --git a/src/collections/programs/lfx-2026/LfxPageNav.js b/src/collections/programs/lfx-2026/LfxPageNav.js index 45c3f27a31f2e3..f3e592aefdea7f 100644 --- a/src/collections/programs/lfx-2026/LfxPageNav.js +++ b/src/collections/programs/lfx-2026/LfxPageNav.js @@ -97,11 +97,16 @@ const LfxPageNav = ({ items }) => { }, [items]); const handleNavClick = (e, href) => { + // Let browser handle modifier-key clicks (Ctrl/Cmd = new tab, Shift = new window). + if (e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); const el = document.querySelector(href); if (el) { el.scrollIntoView({ behavior: "smooth", block: "start" }); - window.history.pushState(null, "", href); + // Avoid pushing a duplicate history entry when the hash is already current. + if (window.location.hash !== href) { + window.history.pushState(null, "", href); + } } }; From f8eecb09933e5713c621c2d86ee9c7dbb33cef47 Mon Sep 17 00:00:00 2001 From: hiyach28 Date: Tue, 4 Aug 2026 17:09:59 +0000 Subject: [PATCH 3/3] Update LFX page navigation Add altKey modifier guard to preserve native browser behaviour for Save Link As. Guard pushState to avoid duplicate history entries. Signed-off-by: hiyach28 --- src/collections/programs/lfx-2026/LfxPageNav.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/collections/programs/lfx-2026/LfxPageNav.js b/src/collections/programs/lfx-2026/LfxPageNav.js index f3e592aefdea7f..72d2765b7fa20f 100644 --- a/src/collections/programs/lfx-2026/LfxPageNav.js +++ b/src/collections/programs/lfx-2026/LfxPageNav.js @@ -97,8 +97,9 @@ const LfxPageNav = ({ items }) => { }, [items]); const handleNavClick = (e, href) => { - // Let browser handle modifier-key clicks (Ctrl/Cmd = new tab, Shift = new window). - if (e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return; + // Let browser handle modifier-key clicks (Ctrl/Cmd = new tab, Alt = save, Shift = new window). + if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.button !== 0) + return; e.preventDefault(); const el = document.querySelector(href); if (el) {