@redseed/redseed-ui-tailwindcss 7.73.0 → 7.73.1

package/components/page_header.css

@@ -350,12 +350,61 @@
     grid-template-columns: repeat(2, minmax(6rem, max-content));
 }
 
+/* THE COUNT STEPS, it does not jump.
+ *
+ * This went straight from two columns to five at 40rem, and that gap is where every
+ * problem with this grid has actually lived. Between roughly 640px and 1000px, five
+ * columns cannot hold five real facts: an email or a location name is 180px of
+ * unbreakable string and the track floor is 96px, so they either wrapped to three lines
+ * or overlapped their neighbour, depending on which version of this rule was in force.
+ *
+ * Fixing one width at a time is what produced those versions. Three columns in the middle
+ * band is the missing step: at 659px that is roughly 200px a column, which holds a real
+ * email on one line.
+ *
+ * Measured across the range with "testlearner6@redseed.com" as the widest fact — see the
+ * table in PageHeaderSpacing.test.js. */
 @media (min-width: 40rem) {
+    .rsui-page-header__meta-region {
+        grid-template-columns: repeat(3, minmax(6rem, max-content));
+    }
+}
+
+@media (min-width: 64rem) {
     .rsui-page-header__meta-region {
         grid-template-columns: repeat(5, minmax(6rem, max-content));
     }
 }
 
+/* A fact has to wrap INSIDE its own cell rather than spilling onto its neighbour.
+ *
+ * The rule above has always said so — "Anything longer wraps inside its own cell rather
+ * than pushing its neighbours" — but nothing enforced it, and two defaults conspire
+ * against it:
+ *
+ *   a grid item's automatic minimum size is its MIN-CONTENT, not the track's floor, so a
+ *   cell holding one unbreakable word refuses to shrink to the 6rem minimum;
+ *
+ *   `overflow-wrap: normal` only breaks at spaces, and the values that overflow are
+ *   exactly the ones without any — "testlearner6@redseed.com", a long location name.
+ *
+ * Together those made an email overlap the fact beside it once the header was narrow
+ * enough that the tracks hit their floor. Seen at 659px, where five columns of 96px fit
+ * but a 180px email does not.
+ *
+ * min-w-0 lets the cell shrink to the track; break-words gives the string somewhere to
+ * break. Scoped to the header's meta rather than applied to MetaInfo everywhere — the
+ * standard's sentence is about this grid, and generalising a layout fix is what caused
+ * the problem this is fixing. */
+.rsui-page-header__meta-region .rsui-meta-info {
+    @apply min-w-0;
+}
+
+.rsui-page-header__meta-region .rsui-meta-info__value,
+.rsui-page-header__meta-region .rsui-meta-info__label {
+    @apply min-w-0 break-words;
+}
+
 .rsui-page-header__meta {
     display: contents;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.73.0",
+    "version": "7.73.1",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",