From 49c17405b205be4cee7473cfdea7b4657539feeb Mon Sep 17 00:00:00 2001
From: Peter Amiri <peter@alurium.com>
Date: Mon, 19 Oct 2026 16:22:08 -0700
Subject: [PATCH] fix(web): contain wide code examples on API reference pages

The API generator writes each function's examples as raw <pre><code>
(renderExtended() in web/scripts/generate-api-docs.mjs), so Expressive
Code never wraps them and its stylesheet, which is the only thing giving
a <pre> overflow-x: auto on these sites, is never loaded on API pages.
base.css only contains `.prose pre`, which API pages don't use, so a long
example line widened the whole page at phone width (by about 441px on
configuration/resources and over 5,000px on view-helpers/telfield).

.sl-markdown-content pre now sets overflow-x: auto, so each example
scrolls inside its own box. Guides code blocks already had the same
value from Expressive Code and are unchanged.

Fixes #4616

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: Peter Amiri <peter@alurium.com>
---
 web/packages/ui/src/styles/starlight-theme.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/packages/ui/src/styles/starlight-theme.css b/web/packages/ui/src/styles/starlight-theme.css
index e5523da008..8215dc9f4a 100644
--- a/web/packages/ui/src/styles/starlight-theme.css
+++ b/web/packages/ui/src/styles/starlight-theme.css
@@ -72,6 +72,13 @@
 .sl-markdown-content pre {
 	border-radius: var(--radius-lg);
 	box-shadow: var(--shadow-sm);
+	/*
+	 * Raw <pre> containment (#4616): the API generator emits examples as raw
+	 * <pre><code> (renderExtended(), generate-api-docs.mjs), so Expressive Code
+	 * never wraps them and ec.css — the only pre containment here — never loads;
+	 * base.css only covers `.prose pre`. (#4620, literal \n, is a separate bug.)
+	 */
+	overflow-x: auto;
 }
 
 /* ── Sidebar (Phase 3 Slice 1) ────────────────────────────────────