@flytedan/flytebot-design-system 0.12.8 → 0.12.9

package/dist/index.js

@@ -8152,7 +8152,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
   const tallest = Math.max(1, ...grouped.map((g) => g.items.length));
   const floor = BANDS2.find((b) => b.key === floorBand) || BANDS2[0];
   return /* @__PURE__ */ jsxs61("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 16 }, children: [
-    /* @__PURE__ */ jsx65("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, alignItems: "end" }, children: grouped.map((g) => {
+    /* @__PURE__ */ jsx65("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 12, alignItems: "end" }, children: grouped.map((g) => {
       const mark = "var(--csi-" + g.n + "-mark)";
       const active = selectedBand === g.key;
       return /* @__PURE__ */ jsxs61(
@@ -8160,16 +8160,23 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
         {
           type: "button",
           onClick: onSelectBand ? () => onSelectBand(active ? null : g.key) : void 0,
-          style: { display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 10, padding: 12, border: "1px solid " + (active ? "var(--border-strong)" : "var(--border)"), borderRadius: "var(--r-lg)", background: active ? "var(--surface-2)" : "var(--surface)", cursor: onSelectBand ? "pointer" : "default", textAlign: "left", minHeight: 190, transition: "background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)" },
+          style: { display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 10, padding: 12, border: "1px solid " + (active ? "var(--border-strong)" : "var(--border)"), borderRadius: "var(--r-lg)", background: active ? "var(--surface-2)" : "var(--surface)", cursor: onSelectBand ? "pointer" : "default", textAlign: "left", minHeight: 190, minWidth: 0, transition: "background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)" },
           children: [
-            /* @__PURE__ */ jsx65("span", { style: { display: "flex", flexDirection: "column-reverse", gap: 4, minHeight: tallest * 24 }, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx65("span", { className: "fd-skel", style: { height: 16, borderRadius: 4 } }, i)) : g.items.map((c) => /* @__PURE__ */ jsx65(
-              "span",
-              {
-                title: c.name + " \xB7 " + c.crp,
-                style: { height: 18, borderRadius: 4, background: "var(--csi-" + g.n + "-fill)", border: "1px solid var(--csi-" + g.n + "-edge)", color: "var(--csi-" + g.n + "-text)", display: "flex", alignItems: "center", padding: "0 7px", fontSize: 10, fontWeight: 700, overflow: "hidden", whiteSpace: "nowrap" },
-                children: c.short || c.name
-              },
-              c.name
+            /* @__PURE__ */ jsx65("span", { style: { display: "flex", flexDirection: "column-reverse", gap: 4, minHeight: tallest * 24, minWidth: 0 }, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx65("span", { className: "fd-skel", style: { height: 16, borderRadius: 4 } }, i)) : g.items.map((c) => (
+              // `overflow: hidden` + `white-space: nowrap` only clips once the span
+              // actually HAS a bounded width to clip against (see the grid/flex
+              // `minWidth: 0` chain above) — `textOverflow: ellipsis` then makes
+              // that clip readable instead of a hard cut mid-letter; the full name
+              // is still one hover away via `title`.
+              /* @__PURE__ */ jsx65(
+                "span",
+                {
+                  title: c.name + " \xB7 " + c.crp,
+                  style: { height: 18, borderRadius: 4, background: "var(--csi-" + g.n + "-fill)", border: "1px solid var(--csi-" + g.n + "-edge)", color: "var(--csi-" + g.n + "-text)", display: "flex", alignItems: "center", padding: "0 7px", fontSize: 10, fontWeight: 700, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" },
+                  children: c.short || c.name
+                },
+                c.name
+              )
             )) }),
             /* @__PURE__ */ jsxs61("span", { className: "fd-row", style: { gap: 8, alignItems: "baseline" }, children: [
               /* @__PURE__ */ jsx65("span", { className: "fd-num-hero", style: { fontSize: 30, color: g.items.length ? "var(--text)" : "var(--text-disabled)" }, children: loading ? "\u2013" : g.items.length }),