@flytedan/flytebot-design-system 0.11.4 → 0.11.5

package/package.json

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

package/styles/components.css

@@ -4050,19 +4050,33 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  /* Cells are fixed-width, so a strip wider than the row it's in has to lose the
-     tail rather than push it: without this the overflowing cells paint straight
-     through whatever is pinned to the end of the strip. Clipping the last column
-     is the right failure here — the alternative is columns that shift row to row,
-     which is the one thing an aligned strip must never do. */
+  /* When even the figures themselves don't fit (see .fd-erow-cell), the strip loses
+     the tail rather than pushing it: without this the overflowing cells paint straight
+     through whatever is pinned to the end of the strip. */
   overflow: hidden;
 }
+/* One column slot. It takes its column's width (--erow-metric-w, set per cell by
+   EntityRowMetrics) whenever the strip has room for every column at its width, which keeps
+   rows and totals aligned. In a strip too narrow for that — a phone, or a list pane squeezed
+   beside another — the slots shrink toward their own figure instead of clipping whole
+   columns off the end: a narrow row gives up alignment before it gives up a figure. The
+   right padding (inside the width) keeps shrunk figures from running into each other. */
+.fd-erow-cell {
+  display: flex;
+  flex: 0 1 auto;
+  width: var(--erow-metric-w);
+  min-width: min-content;
+  padding-right: 6px;
+}
+.fd-erow-cell > .fd-tooltip-anchor,
+.fd-erow-cell .fd-erow-metric {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 .fd-erow-metric {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  flex: none;
-  width: var(--erow-metric-w);
   font-size: var(--overline-size);
   color: var(--text-2);
   white-space: nowrap;
@@ -4117,21 +4131,6 @@ button.fd-erow-metric:focus-visible {
     font-size: 18px;
   }
 }
-/* On a narrow screen the fixed column widths give way to the figures themselves. A phone
-   row has roughly 170px beside its name's grip and its 44px action, and a strip of three
-   columns sized for desktop totals is 270px, so fixed widths there do not clip "the tail":
-   they hide a whole figure, on every row, with nothing to say it exists. Content-sized
-   cells with a gap keep every figure visible; the cost is that columns can drift a few px
-   row to row, which on a phone is the smaller loss. Wider than this, cells keep their
-   fixed widths and the aligned-column contract above holds exactly. */
-@media (max-width: 768px) {
-  .fd-erow-metrics {
-    gap: 10px;
-  }
-  .fd-erow-metric {
-    width: auto;
-  }
-}
 .fd-erow-accessory {
   margin-left: auto;
   flex: none;
@@ -4158,15 +4157,27 @@ button.fd-erow-metric:focus-visible {
   opacity: 0.6;
 }
 
-/* TransferList: two panels side by side, each its own bordered surface. On a narrow screen
-   the panels stack instead: two lists sharing a phone's width get ~140px each, which is
-   too narrow for a search field beside its sort button or for a row's name beside its
-   figures and action, so a list you cannot read is traded for one you scroll past. */
+/* TransferList: two panels side by side, each its own bordered surface — while the
+   component itself is wide enough for that. Below 600px of its OWN width (a phone, or a
+   half-width card on a desktop page) the panels stack: two panes under ~290px each are too
+   narrow for a search field beside its sort button, or for a row's name beside its figures
+   and action, so a list you cannot read is traded for one you scroll past. A container
+   query, not a media query, because the width that matters is the list's, not the
+   screen's. */
 .fd-tlist {
+  container-type: inline-size;
+}
+.fd-tlist-panes {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }
+@container (max-width: 600px) {
+  .fd-tlist-panes {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
 .fd-tlist-side {
   flex: 1;
   min-width: 0;
@@ -4182,12 +4193,6 @@ button.fd-erow-metric:focus-visible {
 .fd-tlist-side.is-drop-target {
   border-color: var(--brand);
 }
-@media (max-width: 768px) {
-  .fd-tlist {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
 /* TransferList's full-panel drop overlay — extends the existing subtle
    dragOverSide border-color change into real visual weight: a dashed blue
    border and a translucent brand scrim across the WHOLE target side, with