From 15e832645c490afacf50c03ea1cd02c7202829a1 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sat, 27 Jun 2026 18:37:18 -0500
Subject: [PATCH] fix: scale mobile pull quote proportionally

---
 tests/mobile-homepage.spec.js          | 31 ++++++++++++++++++++++----
 views/blocks/pull-quote/pull-quote.css | 12 ++++------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js
index 7650e3b..7fffce0 100644
--- a/tests/mobile-homepage.spec.js
+++ b/tests/mobile-homepage.spec.js
@@ -102,19 +102,42 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
     const text = await getBox(page.locator(".pull-quote__text"));
     const vectorImage = page.locator(".pull-quote__vector img");
     const vector = await getBox(vectorImage);
+    const borderWidth = await page.locator(".pull-quote").evaluate((element) =>
+        Number.parseFloat(getComputedStyle(element).borderBottomWidth),
+    );
 
     expectNear(quote.height, 361, 6);
+    expectNear(borderWidth, 16, 1);
     expectNear(text.x - quote.x, 32, 3);
     expect(text.width).toBeGreaterThanOrEqual(330);
     expectNear(text.height, 216, 6);
     expectNear(
         text.y + text.height / 2,
-        quote.y + (quote.height - 12) / 2,
+        quote.y + (quote.height - borderWidth) / 2,
+        8,
+    );
+    expectNear(vector.x, quote.x, 3);
+    expectNear(vector.width, quote.width, 3);
+    expectNear(vector.height, quote.height - borderWidth, 3);
+});
+
+test("mobile pull quote scales proportionally through 767px", async ({
+    page,
+}) => {
+    await page.setViewportSize({ width: 767, height: 900 });
+    await page.goto(homepage);
+
+    const quote = await getBox(page.locator(".pull-quote"));
+    const text = await getBox(page.locator(".pull-quote__text"));
+
+    expectNear(quote.height, 767 * 0.898, 6);
+    expect(text.y).toBeGreaterThanOrEqual(quote.y);
+    expect(text.y + text.height).toBeLessThanOrEqual(quote.y + quote.height);
+    expectNear(
+        text.y + text.height / 2,
+        quote.y + (quote.height - 16) / 2,
         8,
     );
-    expect(vector.width).toBeGreaterThanOrEqual(470);
-    expect(vector.height).toBeGreaterThan(quote.height);
-    await expect(vectorImage).toHaveCSS("object-position", "3% 42%");
 });
 
 test("mobile recent posts exposes previous and next controls", async ({
diff --git a/views/blocks/pull-quote/pull-quote.css b/views/blocks/pull-quote/pull-quote.css
index 92c8e8e..a0e29b1 100644
--- a/views/blocks/pull-quote/pull-quote.css
+++ b/views/blocks/pull-quote/pull-quote.css
@@ -47,18 +47,14 @@
 @media (max-width: 767px) {
     .pull-quote {
         background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
-        border-bottom-width: 0.75rem;
-        height: clamp(18rem, 89.8vw, 22.5625rem);
+        border-bottom-width: 1rem;
+        height: 89.8vw;
     }
 
     .pull-quote .pull-quote__vector img {
-        height: 118%;
-        left: -9%;
-        max-width: none;
+        height: 100%;
         object-fit: fill;
-        object-position: 3% 42%;
-        position: relative;
-        width: 118%;
+        width: 100%;
     }
 
     .pull-quote .pull-quote__content {