Fix mobile landing-page code block clipping by restoring in-block horizontal scroll

docs/src/styles/custom.css

@@ -1598,6 +1598,22 @@ main,
 
 /* Mobile-specific: Enable text wrapping for code snippets */
 @media (max-width: 768px) {
+  /* Keep Expressive Code examples scrollable within the code frame on mobile */
+  .sl-markdown-content .expressive-code,
+  .sl-markdown-content .expressive-code .frame,
+  .sl-markdown-content .expressive-code pre {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .sl-markdown-content .expressive-code .frame {
+    overflow-x: auto;
+  }
+
+  .sl-markdown-content .expressive-code pre {
+    width: 100%;
+  }
+
   .sl-markdown-content pre code {
     white-space: pre-wrap;
     word-break: break-word;

docs/tests/homepage-code-block-overflow.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Homepage code block overflow', () => {
+  const SUBPIXEL_TOLERANCE = 1;
+  const mobileWidths = [360, 393, 428];
+
+  for (const width of mobileWidths) {
+    test(`keeps landing page code block accessible at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 852 });
+      await page.goto('/gh-aw/');
+      await page.waitForLoadState('networkidle');
+
+      const metrics = await page.evaluate((tolerance) => {
+        const frame = document.querySelector<HTMLElement>('.expressive-code .frame');
+        if (!frame) {
+          return null;
+        }
+
+        const frameStyle = getComputedStyle(frame);
+        const hasHorizontalOverflow = frame.scrollWidth > frame.clientWidth + tolerance;
+
+        if (hasHorizontalOverflow) {
+          frame.scrollLeft = frame.scrollWidth;
+        }
+
+        return {
+          bodyScrollWidth: document.body.scrollWidth,
+          bodyClientWidth: document.body.clientWidth,
+          frameOverflowX: frameStyle.overflowX,
+          frameScrollWidth: frame.scrollWidth,
+          frameClientWidth: frame.clientWidth,
+          frameScrolled: frame.scrollLeft > 0,
+        };
+      }, SUBPIXEL_TOLERANCE);
+
+      expect(metrics).not.toBeNull();
+      expect(metrics!.bodyScrollWidth).toBeLessThanOrEqual(metrics!.bodyClientWidth + SUBPIXEL_TOLERANCE);
+      expect(['auto', 'scroll']).toContain(metrics!.frameOverflowX);
+
+      if (metrics!.frameScrollWidth > metrics!.frameClientWidth + SUBPIXEL_TOLERANCE) {
+        expect(metrics!.frameScrolled).toBeTruthy();
+      }
+    });
+  }
+});