From 108b25473e040f9cd922be7cc3fd065a9f55804e Mon Sep 17 00:00:00 2001
From: Leo McArdle <leo@mca.is>
Date: Thu, 17 Jul 2025 14:58:47 +0000
Subject: [PATCH] enhance(doc): add `<wbr>`s to title for better overflow
 wrapping

---
 components/reference-layout/server.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/reference-layout/server.js b/components/reference-layout/server.js
index bc9a3a0dc..3ce981ec7 100644
--- a/components/reference-layout/server.js
+++ b/components/reference-layout/server.js
@@ -23,7 +23,7 @@ export class ReferenceLayout extends ServerComponent {
         <main id="content" class="reference-layout__content">
           <div class="reference-layout__header">
             ${TranslationBanner.render(context)}
-            <h1>${doc.title}</h1>
+            <h1>${wbrify(doc.title)}</h1>
             ${BaselineIndicator.render(context)} ${description}
           </div>
           <aside class="reference-layout__toc">
@@ -42,3 +42,17 @@ export class ReferenceLayout extends ServerComponent {
     `;
   }
 }
+
+/**
+ * Insert <wbr>s to wrap code-like strings in a pretty way
+ * NB: don't use in client side code because we use lookbehind assertions
+ * which aren't baseline green (yet)
+ * @param {string} text
+ */
+function wbrify(text) {
+  return text
+    .split(
+      /(?=\.)|(?<=[a-z])(?=[A-Z0-9])|(?<=[A-Z])(?=[A-Z][a-z])|(?<=[A-Z])(?=[0-9])/,
+    )
+    .flatMap((part, i) => (i ? [html`<wbr />`, part] : part));
+}