FN-7997: keep task-card agent badge text visible on mobile and narrow cards

Stop hiding agent badge labels as icon-only pills on mobile and narrow task cards; rely on existing ellipsis truncation instead.

- Remove @container and max-width media rules that set .card-agent-badge-text { display: none }
- Document the no-icon-only-label requirement with an FNXC comment
- Add regression coverage that label text stays visible with ellipsis and that CSS no longer hides it

Files changed:
 packages/dashboard/app/components/TaskCard.css     | 15 +++-------
 .../__tests__/TaskCard.badge-wrap.test.tsx         | 33 ++++++++++++++++++++++
 2 files changed, 37 insertions(+), 11 deletions(-)

Fusion-Task-Id: FN-7997

Fusion-Task-Lineage: 3add9a91-adef-4299-a638-d71257d26633

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

packages/dashboard/app/components/TaskCard.css

@@ -885,17 +885,10 @@ falling through to an unstyled transparent shell.
   white-space: nowrap;
 }
 
-@container task-card (max-width: 240px) {
-  .card-agent-badge-text {
-    display: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .card-agent-badge-text {
-    display: none;
-  }
-}
+/*
+FNXC:TaskCardBadges 2026-07-15-00:00:
+Task-card agent badges must retain their visible text label in narrow containers and on mobile. Do not hide the label into an icon-only pill; the existing ellipsis constraints preserve the card's no-wrap badge geometry for long names.
+*/
 
 .card-agent-badge--loading {
   animation: pulse 1.5s ease-in-out infinite;

packages/dashboard/app/components/__tests__/TaskCard.badge-wrap.test.tsx

@@ -42,6 +42,14 @@ vi.mock("../PluginSlot", () => ({
 vi.mock("../../hooks/useTaskDiffStats", () => ({
   useTaskDiffStats: () => ({ stats: null, loading: false }),
 }));
+vi.mock("../../hooks/useAgentsMapCache", () => ({
+  useAgentsMapCache: () => ({
+    agentsMap: new Map([["agent-ci", { name: "CI Engineer with a very long display name" }]]),
+    agents: [],
+    loading: false,
+    refresh: vi.fn(),
+  }),
+}));
 vi.mock("../../hooks/useToast", () => ({
   useToast: () => ({
     addToast: vi.fn(),
@@ -551,6 +559,31 @@ describe("TaskCard badge wrapping (FN-5162)", () => {
     expect(styles.whiteSpace).toBe("nowrap");
   });
 
+  it("keeps assigned-agent badge text visible and truncated in mobile and narrow-card CSS", () => {
+    const { container: assignedAgentContainer } = render(
+      <TaskCard
+        task={makeTask({ assignedAgentId: "agent-ci" })}
+        onOpenDetail={noop}
+        addToast={noop}
+      />,
+    );
+
+    const label = assignedAgentContainer.querySelector(".card-agent-badge-text") as HTMLElement;
+    expect(label).toBeTruthy();
+    expect(label.textContent).toBe("CI Engineer ...");
+
+    const labelStyles = getComputedStyle(label);
+    expect(labelStyles.display).not.toBe("none");
+    expect(labelStyles.overflow).toBe("hidden");
+    expect(labelStyles.textOverflow).toBe("ellipsis");
+    expect(labelStyles.whiteSpace).toBe("nowrap");
+
+    // jsdom does not apply media or container queries, so lock the source declaration that would otherwise hide this visible label.
+    const mobileSection = getCssBlocks(loadedCss, "max-width: 768px").join("\n");
+    expect(mobileSection).not.toMatch(/\.card-agent-badge-text\s*\{[^}]*display\s*:\s*none/);
+    expect(loadedCss).not.toMatch(/@container\s+task-card\s*\(max-width:\s*240px\)\s*\{\s*\.card-agent-badge-text\s*\{[^}]*display\s*:\s*none/);
+  });
+
   it("places the agent badge in a left-aligned bottom row outside the header badge cluster", () => {
     const agentRow = container.querySelector(".card-agent-badge-row") as HTMLElement;
     const agentBadge = container.querySelector(".card-agent-created-badge") as HTMLElement;