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,
 }) => {
@@ -0,0 +1,39 @@
+@media (max-width: 767px) {
+    .media-cols {
+        gap: 3rem;
+        grid-template-columns: minmax(0, 1fr);
+        padding: 5rem 0 0;
+        padding-inline: 0 !important;
+    }
+
+    .media-cols > div:first-child {
+        order: 2;
+    }
+
+    .media-cols > div:first-child img {
+        display: block;
+        height: auto;
+        width: 100%;
+    }
+
+    .media-cols .content-wrapper {
+        order: 1;
+        padding: 0;
+    }
+
+    .media-cols .content-wrapper .font-light {
+        font-size: 1rem;
+        line-height: 1.5;
+    }
+
+    .media-cols .content-wrapper .reset {
+        display: grid;
+        gap: 1.375rem;
+        grid-template-columns: minmax(0, 148fr) minmax(0, 124fr);
+        width: min(100%, 18.375rem);
+    }
+
+    .media-cols .content-wrapper .reset .button {
+        width: 100%;
+    }
+}