fix: match mobile contact card design

2026-06-27 20:58:36 -05:00
parent d19924e22b
commit 443be4fb89
3 changed files with 124 additions and 23 deletions
@@ -340,6 +340,88 @@ test("media text keeps its configured ordering at 768px", async ({ page }) => {
    await expect(contentLocator.locator(".reset")).toHaveCSS("display", "flex");
 });

+test("mobile contact card matches the 402px reference geometry", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const cardLocator = page.locator(".contact-block.home-contact");
+    const card = await getBox(cardLocator);
+    const heading = await getBox(cardLocator.locator(".contact-block__text"));
+    const cta = await getBox(cardLocator.locator(".contact-block__cta"));
+    const linework = await getBox(
+        cardLocator.locator(".contact-block__linework"),
+    );
+    const lineworkLocator = cardLocator.locator(".contact-block__linework");
+    const backgroundImage = cardLocator.locator(".contact-block__bg-image");
+    const bandHeight = await cardLocator.evaluate((element) =>
+        Number.parseFloat(getComputedStyle(element).borderBottomWidth),
+    );
+
+    expectNear(card.width, 343, 3);
+    expectNear(card.height, 502, 5);
+    expectNear(card.x, (402 - card.width) / 2, 2);
+    expectNear(bandHeight, 16, 1);
+    expectNear(heading.x - card.x, 33, 3);
+    expectNear(heading.y - card.y, 31, 4);
+    expectNear(cta.x - card.x, 33, 3);
+    expectNear(cta.y - card.y, 219, 5);
+    expectNear(cta.width, 173, 4);
+    expectNear(linework.y - card.y, 300, 5);
+    expectNear(linework.height, 186, 5);
+    expect(linework.x).toBeLessThanOrEqual(card.x);
+    await expect(lineworkLocator).toHaveCSS("overflow", "visible");
+    await expect(backgroundImage).toHaveCSS("object-fit", "fill");
+    await expect(cardLocator).toHaveCSS("border-radius", "16px 16px 0px 0px");
+});
+
+test("mobile contact card scales proportionally and remains contained", async ({
+    page,
+}) => {
+    for (const width of [320, 767]) {
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto(homepage);
+
+        const cardLocator = page.locator(".contact-block.home-contact");
+        const card = await getBox(cardLocator);
+        const heading = await getBox(
+            cardLocator.locator(".contact-block__text"),
+        );
+
+        expect(card.x).toBeGreaterThanOrEqual(0);
+        expect(card.x + card.width).toBeLessThanOrEqual(width);
+        expectNear(card.width / width, 343 / 402, 0.015);
+        expectNear(card.height / card.width, 502 / 343, 0.025);
+        expectNear((heading.x - card.x) / card.width, 33 / 343, 0.01);
+    }
+});
+
+test("contact card restores the desktop layout at 768px", async ({ page }) => {
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.goto(homepage);
+
+    const card = page.locator(".contact-block.home-contact");
+
+    await expect(card).toHaveCSS("position", "absolute");
+    await expect(card).toHaveCSS("border-bottom-width", "16px");
+    await expect(card).toHaveCSS("border-radius", "24px 24px 0px 0px");
+});
+
+test("mobile contact card matches the supplied visual reference", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    await expect(page.locator(".contact-block.home-contact")).toHaveScreenshot(
+        "contact-reference.png",
+        {
+            animations: "disabled",
+            maxDiffPixelRatio: 0.025,
+            threshold: 0.08,
+        },
+    );
+});
+
 test("mobile recent posts exposes previous and next controls", async ({
    page,
 }) => {