@particle-academy/react-fancy 4.19.0 → 5.0.0

package/dist/index.js

@@ -12540,7 +12540,13 @@ function SidebarItem({
       "aria-disabled": disabled || void 0,
       title: collapsed ? title : void 0,
       className: cn(
-        "flex items-center rounded-md text-sm font-medium transition-colors",
+        // `w-full` matters when the Tag is a <button>: form controls size to
+        // FIT-CONTENT, not to their parent, so a long label made the item wider
+        // than the sidebar and an ancestor clipped the overflow — which reads as
+        // a label cut off mid-word rather than an ellipsis. Without this,
+        // `min-w-0` on the label below can never engage, because the item is
+        // never under width pressure in the first place.
+        "flex w-full items-center rounded-md text-sm font-medium transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
         collapsed ? "justify-center px-2 py-2" : "gap-2 px-3 py-2",
         active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100",
@@ -12552,7 +12558,7 @@ function SidebarItem({
         showLetters && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase", children: getLetters(children) }),
         !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
           icon && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
           badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: badge })
         ] })
       ]