fix: match mobile footer design

2026-06-27 22:49:31 -05:00
parent 948cc7e368
commit 20d25e966d
2 changed files with 199 additions and 31 deletions
@@ -697,6 +697,69 @@ test("configured footer channels use the prepared SVG icons", async ({
    ).toBeVisible();
 });

+test("mobile footer matches the reference hierarchy", async ({ page }) => {
+    await page.goto(homepage);
+
+    const footer = page.locator(".site-footer");
+    const footerBox = await getBox(footer);
+    const logo = await getBox(footer.locator(".site-footer__logo-image"));
+    const backToTop = await getBox(footer.locator("#backToTopBtn"));
+    const nav = await getBox(footer.locator("#footer-nav"));
+    const contact = await getBox(footer.locator(".contact"));
+
+    expectNear(footerBox.height, 673, 12);
+    expectNear(logo.y, backToTop.y, 8);
+    expect(nav.y).toBeGreaterThan(logo.y + logo.height);
+    expect(contact.y).toBeGreaterThan(nav.y + nav.height);
+});
+
+test("mobile footer scales down and remains contained", async ({ page }) => {
+    for (const width of [320, 767]) {
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto(homepage);
+
+        const footer = page.locator(".site-footer");
+        const footerBox = await getBox(footer);
+        const logo = await getBox(footer.locator(".site-footer__logo-image"));
+        const backToTop = await getBox(footer.locator("#backToTopBtn"));
+        const nav = await getBox(footer.locator("#footer-nav"));
+        const contact = await getBox(footer.locator(".contact"));
+        const social = await getBox(footer.locator(".social-links"));
+        const copyright = await getBox(footer.locator(".copyright"));
+        const expectedHeight = Math.min(width, 402) * (673 / 402);
+
+        expectNear(footerBox.height, expectedHeight, 12);
+        expectNear(logo.y, backToTop.y, 8);
+        expect(nav.y).toBeGreaterThan(logo.y + logo.height);
+        expect(contact.y).toBeGreaterThan(nav.y + nav.height);
+        expect(social.y).toBeGreaterThan(contact.y + contact.height);
+        expect(copyright.y).toBeGreaterThan(social.y + social.height);
+        expect(footerBox.x).toBeGreaterThanOrEqual(0);
+        expect(footerBox.x + footerBox.width).toBeLessThanOrEqual(width);
+        expect(
+            await page.evaluate(() => document.documentElement.scrollWidth),
+        ).toBeLessThanOrEqual(width);
+    }
+});
+
+test("footer restores its four-column desktop layout at 768px", async ({
+    page,
+}) => {
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.goto(homepage);
+
+    const footer = page.locator(".site-footer");
+    const outer = footer.locator(":scope > .container");
+
+    await expect(footer).toHaveCSS("border-bottom-width", "16px");
+    await expect(footer).toHaveCSS("padding-top", "64px");
+    await expect(outer).toHaveCSS("grid-template-columns", /.+ .+ .+ .+/);
+    await expect(outer.locator(":scope > .text-right")).toHaveCSS(
+        "display",
+        "flex",
+    );
+});
+
 test("mobile homepage has no automated accessibility violations", async ({
    page,
 }) => {