@lotics/ui 43.3.1 → 43.3.2

package/docs/composition.md

@@ -884,6 +884,15 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   the row is filled. In a label-left grid, ONE FIELD PER ROW is not a failure to compact; it is
   the only shape that keeps the column a reader scans. Both attempts are recorded here so nobody
   re-runs them.
+  **A spread `DetailRow` gives its VALUE the squeeze, never its label.** The two share one flex
+  row, so whichever of them cannot shrink forces the other to. A flex child defaults to
+  `min-width: auto`, which floors the value at its longest word — and the label, having no floor
+  of its own, absorbs everything left: on a narrow register a two-word label collapsed to a 4px
+  column 200px tall, one character per line. The `minWidth: 0` on the value is what stops it, and
+  it is load-bearing rather than housekeeping. **The probe generalises past this component**:
+  wherever a fixed-ish label shares a row with a `flex: 1` value, measure the LABEL's width and
+  height across rows whose values differ in length — a label whose box changes shape from row to
+  row is the signature, and it is invisible at any width where every value happens to fit.
   The other caveat: that research studies COMPLETION forms, where the failure mode is a skipped
   required field, while a record page is read-mostly.
   A SUMMARY belongs to the RECORD, not to a section. The highlights-panel precedent (a strip of

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "43.3.1",
+  "version": "43.3.2",
   "type": "module",
   "exports": {
     "./vite": {

package/src/detail_row.tsx

@@ -252,7 +252,16 @@ const styles = StyleSheet.create({
   // is the one that gives way, because it is the one that is long. Both stay
   // shrinkable on purpose: a long LABEL against a short value has to wrap too,
   // and pinning the label unshrinkable would just overflow the row the other way.
-  flexLabel: { flexGrow: 1, flexShrink: 1, flexBasis: "auto" },
+  // Spread mode's label. It does NOT shrink, and that is the whole rule: both
+  // items in this row are floorless under React Native Web (which defaults flex
+  // children to `min-width: 0`, unlike the web's `auto`), so with shrink on both
+  // the flex algorithm splits the deficit and the LABEL loses — measured on a
+  // narrow register, a two-word column name collapsed to a 4px box 200px tall,
+  // one character per line, while its neighbour with a short value measured a
+  // clean 251x20. A label the reader cannot finish makes the row meaningless,
+  // and the value beside it wraps for free (`spreadValue` already carries the
+  // `minWidth: 0` that lets it), so the value is the one that gives way.
+  flexLabel: { flexGrow: 1, flexShrink: 0, flexBasis: "auto" },
   // `center` is what makes a WRAPPED label align sanely, and it does both jobs
   // with no measurement: a one-line label is shorter than the control band, so
   // it centers on the control line (the alignment law); a wrapped label is as