@flytedan/flytebot-design-system 0.12.3 → 0.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "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;
@@ -2180,7 +2195,12 @@
 /* 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
-   an ellipsis instead of spilling its text outside a zero-width box. */
+   an ellipsis instead of spilling its text outside a zero-width box.
+   The crumb also grows (`flex: 1 1 auto`) so it, not the row spacer, takes the width
+   the collapsed controls free. */
+.fd-topbar.is-narrow .fd-crumb {
+  flex: 1 1 auto;
+}
 .fd-topbar.is-narrow .fd-crumb > *:not(:last-child) {
   display: none;
 }
@@ -6197,6 +6217,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);