From 95f9d736813dc1bcb04b86db1b36e9583928469f Mon Sep 17 00:00:00 2001
From: "Moon.eth" <moon@shipoclu.com>
Date: Wed, 29 Jul 2026 10:13:19 +0900
Subject: [PATCH] better handle breaking elements on long content

---
 src/styles/base.css   | 23 +++++++++++++++++++++++
 src/styles/blog.css   | 13 ++++++++++++-
 src/styles/module.css |  8 ++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/styles/base.css b/src/styles/base.css
index 0d2f812..2df21ac 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -25,6 +25,29 @@ body {
   font-size: var(--ms-font-size);
   line-height: var(--ms-line-height);
   -webkit-text-size-adjust: 100%;
+
+  /*
+   * Nearly every string on screen is user-controlled — display names, profile
+   * field *names* as well as values, headlines, bios — and a 200-character
+   * unbroken URL in any of them would otherwise push its column past the page
+   * edge. `overflow-wrap` inherits, so declaring it once here covers every
+   * descendant instead of chasing individual classes.
+   *
+   * `anywhere` rather than `break-word` because it also shrinks the min-content
+   * size, which is what lets a flex or grid item actually give way instead of
+   * blowing out its track. It only breaks a word when there is no other option,
+   * so ordinary prose is unaffected.
+   */
+  overflow-wrap: anywhere;
+}
+
+/* Code and preformatted text opt back out: breaking an identifier mid-token
+   changes what it says. They scroll instead. */
+pre,
+code,
+kbd,
+samp {
+  overflow-wrap: normal;
 }
 
 a {
diff --git a/src/styles/blog.css b/src/styles/blog.css
index 9144052..876a1a0 100644
--- a/src/styles/blog.css
+++ b/src/styles/blog.css
@@ -369,9 +369,20 @@
   border-bottom: 0;
 }
 
+/*
+ * Holds display names. Three constraints pull against each other here:
+ * `nowrap` let one long name widen the table past its column; pinned widths
+ * reserved a quarter of the table for names like "kaia"; and plain auto layout
+ * collapses the column to a single character per line, because the inherited
+ * `overflow-wrap: anywhere` makes min-content one glyph wide.
+ *
+ * Auto layout plus a floor is the combination that satisfies all three: short
+ * names stay compact, the subject keeps the slack, and a hostile name wraps
+ * inside the floor instead of pushing the table out.
+ */
 .bulletin-from {
   font-weight: 700;
-  white-space: nowrap;
+  min-width: 9ch;
 }
 
 .bulletin-date {
diff --git a/src/styles/module.css b/src/styles/module.css
index c8b647c..98f5b6b 100644
--- a/src/styles/module.css
+++ b/src/styles/module.css
@@ -35,11 +35,19 @@
   color: var(--ms-module-header-fg);
 }
 
+/* Caption text is built from display names ("kaia's Interests"), so it has to
+   be able to shrink — a flex item won't go below its content width without
+   `min-width: 0`. */
+.module-header-title {
+  min-width: 0;
+}
+
 /* "[view all]" style link on the right of a caption bar. */
 .module-header-action {
   font-weight: 400;
   font-size: var(--ms-font-size-small);
   white-space: nowrap;
+  flex: 0 0 auto;
 }
 
 .module-body {