From 62b845f1b5e9f71b4def1957a9dfda095180d1a0 Mon Sep 17 00:00:00 2001 From: Calum Muir Date: Fri, 12 Jun 2026 10:29:45 +0000 Subject: [PATCH] Fix CTA cards on mobile: always show 3, correct hrefs, fix overflow clipping - ctaCards now merges Sanity data per-slot over defaults instead of all-or-nothing; a partially-filled CMS (e.g. 2 cards) no longer hides the third card, and an empty href in Sanity falls back to the correct default route - Add overflow: visible to .cta-editorial on mobile so the third card isn't clipped by the desktop overflow: hidden that wasn't being overridden - Add pointer-events: none to the gradient overlay div so it can't intercept taps Co-Authored-By: Claude Sonnet 4.6 --- src/pages/index.astro | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 5eaaabd..902b828 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -40,7 +40,21 @@ const videoHeading = cms?.videoHeading || DEFAULTS.videoHeading; const videoBody = cms?.videoBody || DEFAULTS.videoBody; const videoYoutubeId = cms?.videoYoutubeId || DEFAULTS.videoYoutubeId; const sponsorHeading = cms?.sponsorHeading || DEFAULTS.sponsorHeading; -const ctaCards = cms?.ctaCards?.length ? cms.ctaCards : DEFAULTS.ctaCards; +// Always produce 3 cards; merge Sanity data per-slot over defaults so a +// partially-filled CMS (e.g. only 2 cards) never hides the third card or +// leaves a card with an empty href. +const sanityCards = cms?.ctaCards ?? []; +const ctaCards = DEFAULTS.ctaCards.map((def, i) => { + const s = sanityCards[i]; + if (!s) return def; + return { + label: s.label || def.label, + title: s.title || def.title, + description: s.description || def.description, + image: s.image || def.image, + href: s.href || def.href, + }; +}); const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsors; --- @@ -103,7 +117,7 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor .cta-card:hover .cta-more { opacity: 1; } @media (max-width: 767px) { - .cta-editorial { flex-direction: column; height: auto; } + .cta-editorial { flex-direction: column; height: auto; overflow: visible; } .cta-card { flex: none; height: 280px; } .cta-sub { opacity: 1 !important; } .cta-more { opacity: 1 !important; } @@ -347,7 +361,7 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor loading="lazy" decoding="async" /> -
+

{card.label}