@flytedan/flytebot-design-system 0.12.4 → 0.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.12.4",
+  "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;
@@ -6202,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);