calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix CTA cards on mobile: always show 3, correct hrefs, fix overflow clipping

Browse source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-06-12 10:29:45 +00:00
parent f0a73bb362
commit 62b845f1b5
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/pages/index.astro
View file

@ -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"
/>
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);" />
<div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%); pointer-events: none;" />
<div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 32px; background: rgba(0,0,0,0.48); backdrop-filter: blur(4px);">
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
{card.label}