diff --git a/ui/src/components/EntityRow.tsx b/ui/src/components/EntityRow.tsx index 5b15837b0c2..bc88e971ec9 100644 --- a/ui/src/components/EntityRow.tsx +++ b/ui/src/components/EntityRow.tsx @@ -54,7 +54,7 @@ export function EntityRow({ {identifier} )} - {title} + {title} {(subtitle || reserveSubtitleSpace) && (

{ expect(heartbeatCell).not.toBeNull(); expect(heartbeatCell?.textContent).not.toContain("\n"); }); + + it("gives list-view rows a fixed-width title so meta columns align (PAP-86)", async () => { + root = createRoot(container); + await act(async () => { + root!.render( + + + + + , + ); + }); + await flushReact(); + await flushReact(); + + // Switch from the default org view to the list view. + const listToggle = Array.from(container.querySelectorAll("button")).find( + (btn) => btn.querySelector("svg.lucide-list"), + ); + expect(listToggle).toBeDefined(); + await act(async () => { + listToggle!.click(); + }); + await flushReact(); + + // The title cell carries a constant width (`w-56`), not a content-sized + // `min-w-[7rem]`, so the `meta` group starts at the same x on every row and + // the model + timestamp columns line up vertically. + const titleCell = container.querySelector(".w-56"); + expect(titleCell).not.toBeNull(); + expect(titleCell?.textContent).toContain("Alpha"); + expect(container.querySelector(".min-w-\\[7rem\\]")).toBeNull(); + }); }); diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx index cb0c3799c71..285b636c65e 100644 --- a/ui/src/pages/Agents.tsx +++ b/ui/src/pages/Agents.tsx @@ -215,7 +215,11 @@ export function Agents() {