From c0d8ab5fd7bb221bf39bf476b569b6b48da81c4e Mon Sep 17 00:00:00 2001 From: designbyalex Date: Thu, 6 Aug 2026 14:20:21 +1000 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20Push=20hero=20further=20out?= =?UTF-8?q?=20of=20view=20when=20the=20scroll=20arrow=20is=20clicked?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The arrow scrolled so it landed 10% of the viewport height BELOW the top of the screen, which left a slice of hero on screen and pushed the next section down. Negating the offset lands the arrow 10% ABOVE the top instead, so the hero clears the viewport and the next section moves up by a further 20% of viewport height. This is a one-line change to the existing formula, not a rewrite — it still aims at the arrow rather than at the next section, so it is a partial fix. Measured in Chrome DevTools at seven viewports on the homepage, checking whether the v3ImageCards heading and all three service cards are fully visible after the scroll settles: 375x667 heading OK, cards cut off by 326px 390x844 heading OK, cards cut off by 64px 768x1024 heading OK, cards fully visible 1280x800 heading OK, cards cut off by 71px 1366x768 heading OK, cards cut off by 110px 1440x900 heading OK, cards fully visible (35px spare) 1920x1080 heading OK, cards fully visible The residual clipping has two causes. The formula targets the button, so the heading lands 99-122px down the viewport and that dead space is what pushes the cards past the bottom edge. And at 375x667 and 1366x768 the requirement is geometrically unreachable at any scroll offset: heading top to cards bottom measures 871px against 667px available, and 766px against 768px. Those two need the section's py-24 or the card graphic height reduced. Closes #4928 Co-Authored-By: Claude Opus 5 --- components/blocks/v3/heroBox/heroBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/blocks/v3/heroBox/heroBox.tsx b/components/blocks/v3/heroBox/heroBox.tsx index bf5b3bca0f..6b8acd1e50 100644 --- a/components/blocks/v3/heroBox/heroBox.tsx +++ b/components/blocks/v3/heroBox/heroBox.tsx @@ -63,7 +63,7 @@ export const V3HeroBox = ({ data, priority = false }) => { // the top of the screen, pulling the hero up out of the way. const { top } = e.currentTarget.getBoundingClientRect(); window.scrollTo({ - top: window.scrollY + top - window.innerHeight * 0.1, + top: window.scrollY + top - window.innerHeight * -0.1, behavior: "smooth", }); }} From f2402f17535f15f723a891a412f8971c4dc04afb Mon Sep 17 00:00:00 2001 From: designbyalex Date: Thu, 6 Aug 2026 14:28:52 +1000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=9D=20Fix=20stale=20comment=20on?= =?UTF-8?q?=20the=20hero=20scroll=20arrow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The arrow now lands above the top of the screen, not below it. Co-Authored-By: Claude Opus 5 --- components/blocks/v3/heroBox/heroBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/blocks/v3/heroBox/heroBox.tsx b/components/blocks/v3/heroBox/heroBox.tsx index 6b8acd1e50..c67cd30630 100644 --- a/components/blocks/v3/heroBox/heroBox.tsx +++ b/components/blocks/v3/heroBox/heroBox.tsx @@ -59,8 +59,8 @@ export const V3HeroBox = ({ data, priority = false }) => { type="button" aria-label="Scroll to content" onClick={(e) => { - // Scroll so the arrow ends up 10% of the viewport height down from - // the top of the screen, pulling the hero up out of the way. + // Scroll the arrow 10% of the viewport height past the top of the + // screen, clearing the hero out of the way. const { top } = e.currentTarget.getBoundingClientRect(); window.scrollTo({ top: window.scrollY + top - window.innerHeight * -0.1, From 519dd6234d91608e6fd6a6b24de517b89ec276f2 Mon Sep 17 00:00:00 2001 From: designbyalex Date: Thu, 6 Aug 2026 14:29:29 +1000 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=A7=B9=20Collapse=20the=20double=20ne?= =?UTF-8?q?gative=20in=20the=20scroll=20offset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Same result, one less sign to misread. Co-Authored-By: Claude Opus 5 --- components/blocks/v3/heroBox/heroBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/blocks/v3/heroBox/heroBox.tsx b/components/blocks/v3/heroBox/heroBox.tsx index c67cd30630..38561a13f3 100644 --- a/components/blocks/v3/heroBox/heroBox.tsx +++ b/components/blocks/v3/heroBox/heroBox.tsx @@ -63,7 +63,7 @@ export const V3HeroBox = ({ data, priority = false }) => { // screen, clearing the hero out of the way. const { top } = e.currentTarget.getBoundingClientRect(); window.scrollTo({ - top: window.scrollY + top - window.innerHeight * -0.1, + top: window.scrollY + top + window.innerHeight * 0.1, behavior: "smooth", }); }}