fix: align mobile hero vector crop

This commit is contained in:
Keith Solomon
2026-06-27 17:46:58 -05:00
parent 6d3bb76b17
commit bdf78d58ac
2 changed files with 6 additions and 5 deletions
+5 -4
View File
@@ -40,6 +40,9 @@ test("mobile hero matches the 402px reference composition", async ({
const hero = await getBox(page.locator(".homepage-hero")); const hero = await getBox(page.locator(".homepage-hero"));
const heading = await getBox(page.locator(".homepage-hero .intro h1")); const heading = await getBox(page.locator(".homepage-hero .intro h1"));
const vector = await getBox(
page.locator(".homepage-hero .heroVector .vector"),
);
const buttons = page.locator(".homepage-hero .reset .button"); const buttons = page.locator(".homepage-hero .reset .button");
const firstButton = await getBox(buttons.nth(0)); const firstButton = await getBox(buttons.nth(0));
const secondButton = await getBox(buttons.nth(1)); const secondButton = await getBox(buttons.nth(1));
@@ -47,14 +50,12 @@ test("mobile hero matches the 402px reference composition", async ({
expectNear(hero.height, 752, 8); expectNear(hero.height, 752, 8);
expectNear(heading.x, 32, 3); expectNear(heading.x, 32, 3);
expect(heading.width).toBeGreaterThanOrEqual(330); expect(heading.width).toBeGreaterThanOrEqual(330);
expectNear(vector.x, -414, 8);
expectNear(firstButton.y, secondButton.y, 2); expectNear(firstButton.y, secondButton.y, 2);
expectNear(firstButton.width, 148, 4); expectNear(firstButton.width, 148, 4);
expectNear(secondButton.width, 156, 4); expectNear(secondButton.width, 156, 4);
const location = page.locator(".homepage-hero__location"); await expect(page.locator(".homepage-hero__location")).toBeVisible();
if ((await location.count()) > 0) {
await expect(location).toBeVisible();
}
}); });
test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => { test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
+1 -1
View File
@@ -112,7 +112,7 @@
.homepage-hero .heroVector .vector { .homepage-hero .heroVector .vector {
bottom: 6.25rem; bottom: 6.25rem;
left: 50%; left: -8%;
transform: translateX(-50%); transform: translateX(-50%);
width: clamp(43rem, 190vw, 48rem); width: clamp(43rem, 190vw, 48rem);
} }