From f8d60a63a41bd8ca458c6fec95389e94753257b0 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sat, 27 Jun 2026 17:53:00 -0500 Subject: [PATCH] fix: scale mobile hero vector responsively --- tests/mobile-homepage.spec.js | 16 ++++++++++++++++ views/blocks/homepage-hero/homepage-hero.css | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js index 8b308f8..33fbb55 100644 --- a/tests/mobile-homepage.spec.js +++ b/tests/mobile-homepage.spec.js @@ -62,12 +62,28 @@ test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => { await page.setViewportSize({ width: 320, height: 800 }); await page.goto(homepage); + const vector = await getBox( + page.locator(".homepage-hero .heroVector .vector"), + ); const buttons = page.locator(".homepage-hero .reset .button"); const firstButton = await getBox(buttons.nth(0)); const secondButton = await getBox(buttons.nth(1)); expectNear(firstButton.y, secondButton.y, 2); expect(secondButton.x + secondButton.width).toBeLessThanOrEqual(320); + expect(vector.x + vector.width).toBeGreaterThanOrEqual(316); +}); + +test("mobile hero vector covers the 767px composition", async ({ page }) => { + await page.setViewportSize({ width: 767, height: 900 }); + await page.goto(homepage); + + const vector = await getBox( + page.locator(".homepage-hero .heroVector .vector"), + ); + + expect(vector.x).toBeLessThan(0); + expect(vector.x + vector.width).toBeGreaterThanOrEqual(760); }); test("mobile recent posts exposes previous and next controls", async ({ diff --git a/views/blocks/homepage-hero/homepage-hero.css b/views/blocks/homepage-hero/homepage-hero.css index 72a570a..3be9337 100644 --- a/views/blocks/homepage-hero/homepage-hero.css +++ b/views/blocks/homepage-hero/homepage-hero.css @@ -112,9 +112,9 @@ .homepage-hero .heroVector .vector { bottom: 6.25rem; - left: -8%; + left: max(-8vw, calc(63.8vw - 18.04rem)); transform: translateX(-50%); - width: clamp(43rem, 190vw, 48rem); + width: calc(100vw + 22.875rem); } .homepage-hero .heroMedia img,