@anchrd/intel-ui 0.48.0 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/feed/feed.tsx

@@ -18,6 +18,21 @@ import { initials, useSessionUser } from "@/user-name/user-name.ts";
 
 const PageSize = 30;
 
+// How many steps of the trail a card shows.
+//
+// ⚠️ The LAST ones, not the first, and that is the whole decision (#758). A path answers "where does
+// this sit", and the answer is at its end: `… / system / Kundenwissen` says where `Kunde A` lives,
+// `Agenten / Anton Anchrd / sys…` says where the tree begins, which every card shares. Cutting from
+// the front is what `truncate` does on its own, so this has to be decided here rather than left to
+// CSS.
+const TrailSteps = 2;
+
+/** The tail of a trail, with a leading ellipsis where something was cut. */
+export function shortTrail(titles: readonly string[]): string {
+  if (titles.length <= TrailSteps) return titles.join(" / ");
+  return `… / ${titles.slice(-TrailSteps).join(" / ")}`;
+}
+
 // Who to show. Only the first two reach the server; `people` is applied here because whether an
 // actor is a machine is Gate's answer and arrives with the names, not with the events.
 type Audience = "all" | "mine" | "people";
@@ -280,9 +295,17 @@ function FeedCard({
         <span className="text-sm leading-snug">
           {i18n.t(`feed.action.${event.action}`, { who, title: event.nodeTitle })}
         </span>
-        <span className="flex items-center justify-between gap-3">
-          <span className="truncate text-xs text-muted-foreground">
-            {event.path.map((step) => step.title).join(" / ")}
+        {/* ⚠️ `min-w-0` is not decoration. A grid item defaults to `min-width: auto`, so without it
+            this row grows to whatever the path needs and pushes the button PAST the card's edge —
+            which is what a four-step path did on a phone. `truncate` below cannot save it either: it
+            shortens against the width it is given, and its parent was already too wide. */}
+        <span className="flex min-w-0 items-center justify-between gap-3">
+          <span
+            className="truncate text-xs text-muted-foreground"
+            // The whole path stays reachable where there is a pointer to rest.
+            title={event.path.map((step) => step.title).join(" / ")}
+          >
+            {shortTrail(event.path.map((step) => step.title))}
           </span>
           {/* ⚠️ A button, not a label. The whole point of the mark is getting there, and a span
               carries no focus — so the keyboard requirement could not be met by a surface that had