fix: match mobile Our Work design

2026-06-27 22:01:47 -05:00
parent ca8f5c939d
commit 6206761573
2 changed files with 139 additions and 27 deletions
@@ -451,6 +451,91 @@ test("mobile contact card render remains stable", async ({ page }) => {
    );
 });

+test("mobile Our Work contains both reference images", async ({ page }) => {
+    await page.goto(homepage);
+
+    const block = await getBox(page.locator(".our-work"));
+    const left = await getBox(page.locator(".our-work__media--left"));
+    const bottom = await getBox(page.locator(".our-work__media--bottom"));
+    const vector = await getBox(page.locator(".our-work__vector img"));
+
+    expectNear(block.height, 888, 12);
+    expectNear(left.width, 189, 5);
+    expect(bottom.width).toBeGreaterThanOrEqual(335);
+    expect(bottom.x).toBeGreaterThanOrEqual(60);
+    expect(bottom.x + bottom.width).toBeLessThanOrEqual(402);
+    expectNear(vector.width, 474, 4);
+    expectNear(vector.y - block.y, 160, 3);
+});
+
+test("mobile Our Work follows the reference content and overlap order", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const block = await getBox(page.locator(".our-work"));
+    const content = await getBox(page.locator(".our-work__content"));
+    const left = await getBox(page.locator(".our-work__media--left"));
+    const bottom = await getBox(page.locator(".our-work__media--bottom"));
+    const paragraph = page.locator(".our-work__content p");
+    const paragraphBox = await getBox(paragraph);
+    const buttons = page.locator(".our-work .button");
+    const primary = await getBox(buttons.nth(0));
+    const secondary = await getBox(buttons.nth(1));
+
+    expectNear(content.x - block.x, 32, 3);
+    expectNear(content.y - block.y, 68, 8);
+    expectNear(paragraphBox.y - block.y, 146, 4);
+    expect(content.y).toBeLessThan(left.y);
+    expectNear(left.y - block.y, 428, 12);
+    expectNear(bottom.y - block.y, 595, 12);
+    expectNear(primary.y, secondary.y, 2);
+    expectNear(primary.y - block.y, 321, 4);
+    expectNear(primary.height, 44, 2);
+    expectNear(secondary.height, 44, 2);
+    await expect(paragraph).toHaveCSS("text-wrap", "wrap");
+});
+
+test("mobile Our Work remains contained at responsive endpoints", async ({
+    page,
+}) => {
+    for (const width of [320, 767]) {
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto(homepage);
+
+        const block = await getBox(page.locator(".our-work"));
+        const left = await getBox(page.locator(".our-work__media--left"));
+        const bottom = await getBox(page.locator(".our-work__media--bottom"));
+        const buttons = page.locator(".our-work .button");
+        const primary = await getBox(buttons.nth(0));
+        const secondary = await getBox(buttons.nth(1));
+
+        for (const item of [left, bottom, primary, secondary]) {
+            expect(item.x).toBeGreaterThanOrEqual(block.x);
+            expect(item.x + item.width).toBeLessThanOrEqual(
+                block.x + block.width,
+            );
+        }
+
+        expectNear(primary.y, secondary.y, 2);
+        expect(left.y).toBeLessThan(bottom.y);
+    }
+});
+
+test("Our Work restores its tablet layout at 768px", async ({ page }) => {
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.goto(homepage);
+
+    const block = page.locator(".our-work");
+    const inner = block.locator(".our-work__inner");
+    const vector = block.locator(".our-work__vector img");
+
+    await expect(block).toHaveCSS("min-height", "0px");
+    await expect(block).toHaveCSS("padding-top", "64px");
+    await expect(inner).toHaveCSS("padding-left", "38.4px");
+    await expect(vector).toHaveCSS("width", "768px");
+});
+
 test("mobile recent posts exposes previous and next controls", async ({
    page,
 }) => {