@flytedan/flytebot-design-system 0.12.14 → 0.12.15

package/package.json

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

package/styles/components.css

@@ -2252,7 +2252,16 @@
   padding: 0 var(--gutter-lg);
   position: relative;
 }
+/* MP-141: the breadcrumb is the Topbar's only elastic item. Every other direct child
+   (overflowActions, actions — the version badge, the account trigger, any icon button)
+   keeps its content width at any viewport: it never shrinks below what its own content
+   needs. The crumb absorbs whatever space that leaves, growing to fill the row (so no
+   separate spacer element is needed) and shrinking first when the row is tight. */
+.fd-topbar > *:not(.fd-crumb) {
+  flex-shrink: 0;
+}
 .fd-crumb {
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -2266,7 +2275,15 @@
 .fd-crumb a:hover {
   color: var(--text);
 }
+/* The current crumb already exposes its full text via `truncationTitle` (Topbar.tsx),
+   so it may ellipsize at any width, not only `.is-narrow` — the same rule that used to
+   apply only in the collapsed layout now applies everywhere the row runs out of room. */
 .fd-crumb-current {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--text);
   font-weight: var(--w-semibold);
 }
@@ -2314,23 +2331,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.
-   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;
-}
+   nav drawer `onMenu` opens still reaches them). The crumb's grow/shrink and the current
+   crumb's ellipsis are the base `.fd-crumb`/`.fd-crumb-current` rules above — they apply
+   at every width, not only here. */
 .fd-topbar.is-narrow .fd-crumb > *:not(:last-child) {
   display: none;
 }
-.fd-topbar.is-narrow .fd-crumb-current {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 /* ============ Overlays ============ */
 /* z-index is set inline by Modal.tsx/Drawer.tsx via useOverlayLayer (see Popover.tsx). */