@flytedan/flytebot-design-system 0.12.4 → 0.12.6

package/package.json

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

package/styles/components.css

@@ -678,9 +678,16 @@
   border-color: var(--border-strong);
   transform: translateY(-1px);
 }
+/* The header degrades in two steps as the action slot needs more room than is left:
+   first the title gives up ITS OWN spare width (ordinary flex-shrink) down to
+   fd-card-head-title's min-width; once even that doesn't leave enough room for the
+   action slot, flex-wrap moves the action onto its own row below the title rather than
+   continuing to squeeze the title past a readable width. Nothing here is per-consumer —
+   a wide action slot (badges, buttons, a switch) never needs an app-side workaround. */
 .fd-card-head {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
   padding: 16px 18px;
   border-bottom: 1px solid var(--border);
@@ -691,7 +698,13 @@
   letter-spacing: var(--h3-track);
   font-weight: var(--w-semibold);
   flex: 1;
-  min-width: 0;
+  /* The floor the title may shrink to before the action slot is made to wrap instead —
+     enough for a short word plus an ellipsis, never zero. Text past this on one line
+     truncates rather than overflowing the header. */
+  min-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .fd-card-body {
   padding: 18px;
@@ -1387,6 +1400,8 @@
 .fd-soon-cone-mark i {
   font-size: 11px;
 }
+/* The z-index below is a resting default only — ComingSoon.tsx always sets it inline via
+   useOverlayLayer(SOON_HOVERCARD_BASE), which wins over this rule (see Popover.tsx). */
 .fd-soon-hovercard {
   transform: none;
   z-index: 220;
@@ -2177,6 +2192,44 @@
   gap: 2px;
   min-width: 160px;
 }
+/* MP-117 — every direct child of the overflow list (Ask, a version badge, Appearance,
+   Dev tools, Undo — whatever a screen collapses) is one full-width row, so a compact
+   control that packed tightly against its neighbours in the dense bar (a pill badge, a
+   fixed-size icon square) can't sit at a different width/height than the rest and read
+   as overlapping or uneven once stacked. */
+.fd-topbar-overflow-list > * {
+  width: 100%;
+  flex: none;
+}
+.fd-topbar-overflow-list > .fd-badge {
+  height: var(--control-h-md);
+  border-radius: var(--r-md);
+  justify-content: flex-start;
+}
+/* An IconButton rendered here (see OverflowRowContext/IconButton.tsx) trades its
+   dense-bar square for a full labelled row: same icon, same accessible name, now with
+   that name shown as text instead of only living in `aria-label`/`title`. */
+.fd-btn-icon-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+  height: var(--control-h-md);
+  padding: 0 10px;
+}
+.fd-btn-icon-row .ph {
+  font-size: 18px;
+  flex: none;
+}
+.fd-btn-icon-row-label {
+  font-size: var(--body-sm-size);
+  font-weight: var(--w-semibold);
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* Narrow Topbar (`is-narrow`, set by Topbar from its own `overflowBreakpoint`, so the
    crumb rules and the overflow menu always switch together): earlier crumbs hide (the
    nav drawer `onMenu` opens still reaches them), and the current crumb truncates with
@@ -4214,6 +4267,23 @@ 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. */
+  .fd-erow-cell {
+    width: auto;
+  }
+  .fd-erow-metrics {
+    flex-wrap: wrap;
+    overflow: visible;
+  }
 }
 .fd-tlist-side {
   flex: 1;
@@ -6202,6 +6272,8 @@ button.fd-erow-metric:focus-visible {
   border: 1.5px solid var(--surface);
   animation: fd-badge-pop 260ms var(--ease) both;
 }
+/* The z-index below is a resting default only — ModeSwitch.tsx always sets it inline via
+   useOverlayLayer(MODE_SWITCH_BASE), which wins over this rule (see Popover.tsx). */
 .fd-mode-pop {
   position: absolute;
   top: calc(100% + 8px);