fix: match mobile image text layout

2026-06-27 20:17:30 -05:00
parent 4969e4c9ce
commit 6263a98988
2 changed files with 104 additions and 0 deletions
@@ -240,6 +240,71 @@ test("mobile pull quote linework render remains stable", async ({ page }) => {
    );
 });

+test("mobile media text matches the 402px reference composition", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const block = await getBox(page.locator(".media-cols"));
+    const content = await getBox(page.locator(".media-cols .content-wrapper"));
+    const media = await getBox(page.locator(".media-cols > div:first-child"));
+    const buttons = page.locator(".media-cols .reset .button");
+    const services = await getBox(buttons.nth(0));
+    const about = await getBox(buttons.nth(1));
+    const contact = await getBox(page.locator(".contact-block.home-contact"));
+
+    expect(content.y).toBeLessThan(media.y);
+    expectNear(content.y - block.y, 80, 4);
+    expectNear(services.y, about.y, 2);
+    expectNear(services.width, 148, 4);
+    expectNear(about.width, 124, 4);
+    expectNear(media.x, 32, 3);
+    expectNear(media.y - block.y, 458, 4);
+    expectNear(media.width, 338, 3);
+    expectNear(media.height, 244, 4);
+    expectNear(contact.y - (media.y + media.height), 232, 5);
+});
+
+test("mobile media text remains contained at responsive endpoints", async ({
+    page,
+}) => {
+    for (const width of [320, 767]) {
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto(homepage);
+
+        const content = await getBox(
+            page.locator(".media-cols .content-wrapper"),
+        );
+        const media = await getBox(
+            page.locator(".media-cols > div:first-child"),
+        );
+        const buttons = page.locator(".media-cols .reset .button");
+        const services = await getBox(buttons.nth(0));
+        const about = await getBox(buttons.nth(1));
+
+        expect(content.y).toBeLessThan(media.y);
+        expectNear(services.y, about.y, 2);
+        expect(media.x).toBeGreaterThanOrEqual(0);
+        expect(media.x + media.width).toBeLessThanOrEqual(width);
+        expect(services.x).toBeGreaterThanOrEqual(content.x);
+        expect(about.x + about.width).toBeLessThanOrEqual(
+            content.x + content.width,
+        );
+    }
+});
+
+test("media text keeps its configured ordering at 768px", async ({ page }) => {
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.goto(homepage);
+
+    const content = await getBox(page.locator(".media-cols .content-wrapper"));
+    const media = await getBox(page.locator(".media-cols > div:first-child"));
+
+    expect(media.y).toBeLessThan(content.y);
+    expectNear(media.x, 70, 3);
+    expectNear(media.width, 627, 3);
+});
+
 test("mobile recent posts exposes previous and next controls", async ({
    page,
 }) => {