better handle breaking elements on long content

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 {

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 {

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 {