fix: harden mobile pull quote layout

playwright.config.js

@@ -14,6 +14,7 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './tests',
+  snapshotPathTemplate: '{testDir}/{testFilePath}-snapshots/{arg}{-projectName}{ext}',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

tests/mobile-homepage.spec.js

@@ -142,6 +142,49 @@ test("mobile pull quote scales proportionally through 767px", async ({
     expectNear(text.y + text.height / 2, quote.y + (quote.height - 16) / 2, 8);
 });
 
+test("mobile pull quote keeps text above the band at 320px", async ({
+    page,
+}) => {
+    await page.setViewportSize({ width: 320, height: 800 });
+    await page.goto(homepage);
+
+    const quote = await getBox(page.locator(".pull-quote"));
+    const content = await getBox(page.locator(".pull-quote__content"));
+    const text = await getBox(page.locator(".pull-quote__text"));
+
+    expectNear(quote.height, 320 * 0.898, 6);
+    expectNear(content.height, quote.height - 16, 3);
+    expect(text.y - content.y).toBeGreaterThanOrEqual(12);
+    expect(
+        content.y + content.height - (text.y + text.height),
+    ).toBeGreaterThanOrEqual(12);
+});
+
+test("mobile pull quote grows when its text needs more room", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const quoteLocator = page.locator(".pull-quote");
+    const initialQuote = await getBox(quoteLocator);
+    await page.locator(".pull-quote__text p").evaluate((paragraph) => {
+        paragraph.textContent = `${paragraph.textContent} ${paragraph.textContent} ${paragraph.textContent}`;
+    });
+
+    const quote = await getBox(quoteLocator);
+    const content = await getBox(page.locator(".pull-quote__content"));
+    const text = await getBox(page.locator(".pull-quote__text"));
+    const vector = await getBox(page.locator(".pull-quote__vector--mobile"));
+
+    expect(quote.height).toBeGreaterThan(initialQuote.height);
+    expectNear(content.height, quote.height - 16, 3);
+    expectNear(vector.height, quote.height - 16, 3);
+    expect(text.y).toBeGreaterThanOrEqual(content.y);
+    expect(text.y + text.height).toBeLessThanOrEqual(
+        content.y + content.height,
+    );
+});
+
 test("pull quote restores the configured artwork at 768px", async ({
     page,
 }) => {
@@ -181,6 +224,19 @@ test("mobile pull quote matches the supplied visual reference", async ({
     );
 });
 
+test("mobile pull quote linework render remains stable", async ({ page }) => {
+    await page.goto(homepage);
+
+    await expect(page.locator(".pull-quote__vector--mobile")).toHaveScreenshot(
+        "pullquote-linework-render.png",
+        {
+            animations: "disabled",
+            maxDiffPixelRatio: 0.001,
+            threshold: 0.02,
+        },
+    );
+});
+
 test("mobile recent posts exposes previous and next controls", async ({
     page,
 }) => {

views/blocks/pull-quote/pull-quote.css

@@ -53,7 +53,7 @@
     .pull-quote {
         background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
         border-bottom: 0;
-        height: calc(89.8vw - 1px);
+        min-height: calc(89.8vw - 1px);
     }
 
     .pull-quote::after {
@@ -86,7 +86,8 @@
     .pull-quote .pull-quote__content {
         align-items: center;
         display: flex;
-        height: calc(100% - 1rem);
+        margin-bottom: 1rem;
+        min-height: calc(89.8vw - 1rem - 1px);
         padding: 2.5rem 2rem;
     }
 
@@ -96,3 +97,9 @@
         width: 100%;
     }
 }
+
+@media (max-width: 360px) {
+    .pull-quote .pull-quote__content {
+        padding-block: 0.9375rem;
+    }
+}

views/blocks/pull-quote/pull-quote.php

@@ -28,12 +28,12 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 ?>
 
 <section <?php echo wp_kses_post( $wrapper ); ?>>
-	<?php if ( $quote_bg ) : ?>
 	<div class="pull-quote__vector" aria-hidden="true">
+		<?php if ( $quote_bg ) : ?>
             <img class="pull-quote__vector--bg" src="<?php echo esc_url( $quote_bg['url'] ); ?>" alt="" loading="lazy" role="presentation" />
+		<?php endif; ?>
 		<img class="pull-quote__vector--mobile" src="<?php echo esc_url( get_theme_file_uri( '/static/img/pullquote-mobile-linework.png' ) ); ?>" alt="" loading="lazy" role="presentation" />
 	</div>
-	<?php endif; ?>
 
 	<div class="container wider pull-quote__content">
 		<div class="pull-quote__text">