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() {