@flytedan/flytebot-design-system 0.12.8 → 0.12.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -4267,22 +4267,37 @@ button.fd-erow-metric:focus-visible {
     flex-direction: column;
     align-items: stretch;
   }
-  /* MP-114: below the same width EntityRow's metric strip stops having room to keep
-     every column at the desktop's fixed --erow-metric-w (set so rows line up with a
-     multi-digit totals footer, see EntityRowMetrics/.fd-erow-cell above) — even each
-     cell's own un-wrapped figure (`.fd-erow-metric`'s `white-space: nowrap` makes its
-     min-content equal its full width) no longer fits together in the strip, and
-     `.fd-erow-metrics`'s `overflow: hidden` was clipping the ones that didn't. A
-     stacked phone pane never regains that room, so the fixed-column alignment this
-     component is built for is traded, at this width only, for every metric staying a
-     whole, readable button: cells size to their own content instead of the desktop
-     column width, and the strip wraps instead of clipping. */
+  /* MP-114 (follow-up — the `width: auto` version of this rule regressed the
+     alignment it was supposed to preserve): below this width EntityRow's metric strip
+     stops having room to keep every column at the desktop's fixed --erow-metric-w (set
+     so rows line up with a multi-digit totals footer, see EntityRowMetrics/.fd-erow-cell
+     above) — even each cell's own un-wrapped figure (`.fd-erow-metric`'s
+     `white-space: nowrap` makes its min-content equal its full width) no longer fits
+     together in the strip, and `.fd-erow-metrics`'s `overflow: hidden` was clipping the
+     ones that didn't.
+     The first fix let `.fd-erow-cell` go `width: auto` — but "auto" means "size to your
+     own content", and a row's own figures and TransferList's footer totals almost never
+     have the same digit counts, so the row's strip and the totals strip (the SAME
+     component, at the SAME nominal column widths) drifted apart the moment either one's
+     content did — audience-builder.spec.ts caught this: a row 14px narrower than the
+     totals line under it. A fixed-width cell has to stay fixed-width EVERYWHERE for
+     "the same column lands at the same x on every row and on the totals line" (see
+     .fd-erow-metrics's own comment above) to mean anything, including here. So instead:
+     `flex-shrink: 0` keeps every cell at its exact declared width even when the strip
+     has less room than the three columns need, which the row and the footer both still
+     agree on regardless of what either one's figures say — and `.fd-erow-metrics`
+     scrolls that overflow horizontally instead of clipping it, the same "wide content
+     gets its own scroll container, nothing else has to give" rule DataTable's
+     `.fd-table-wrap` already follows (and the layout auditor already treats an
+     `overflow: auto` ancestor as fine by design). A phone-width row keeps every figure
+     reachable, one swipe away, rather than losing it or drifting out of line with the
+     total it belongs under. */
   .fd-erow-cell {
-    width: auto;
+    flex-shrink: 0;
   }
   .fd-erow-metrics {
-    flex-wrap: wrap;
-    overflow: visible;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 }
 .fd-tlist-side {