diff --git a/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx b/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx index 673fe94ee1090..52faef4853eab 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx @@ -44,6 +44,7 @@ function Card({ fixture, rows = 1, automationRows = 0, + serverRows = 0, }: { threadRef: ScopedThreadRef; inline: boolean; @@ -52,6 +53,8 @@ function Card({ rows?: number; /** Rows of 100px in an automations list shown at full density. */ automationRows?: number; + /** Rows of 100px in a servers list shown at full density. */ + serverRows?: number; }) { return ( // The web root renders in StrictMode, which re-runs ref callbacks on every mount. @@ -83,6 +86,9 @@ function Card({ {density === "full" && automationRows > 0 ? (
) : null} + {density === "full" && serverRows > 0 ? ( +
+ ) : null} )} @@ -177,3 +183,14 @@ it("keeps full density when many automations make the content tall", async () => .element(page.getByRole("region", { name: "Thread details" })) .toHaveAttribute("data-density", "full"); }); + +it("keeps full density when many servers make the content tall", async () => { + using fixture = setup(); + await using _screen = await render( + , + ); + await expect.element(page.getByText("Details for thread-b")).toBeVisible(); + await expect + .element(page.getByRole("region", { name: "Thread details" })) + .toHaveAttribute("data-density", "full"); +}); diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx index 969172c77a972..41c09eae4355f 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx @@ -78,10 +78,11 @@ export function ThreadDetailsCard({ const measure = () => { const frame = element.closest("[data-thread-details-card]"); const next = element.offsetHeight + (frame ? frame.offsetHeight - frame.clientHeight : 0); - // PR lists, lineage, side chats and automations scroll as they grow. Counting them toward - // density would hide the section and workspace controls when the user asks to see more rows. + // PR lists, lineage, side chats, automations and servers scroll as they grow. Counting + // them toward density would hide the section and workspace controls when the user asks + // to see more rows. const lists = element.querySelectorAll( - "[data-thread-relationships-panel], [data-thread-side-chats-panel], [data-thread-details-pr-list], [data-thread-automations-panel]", + "[data-thread-relationships-panel], [data-thread-side-chats-panel], [data-thread-details-pr-list], [data-thread-automations-panel], [data-thread-servers-panel]", ); const fittingHeight = next - Array.from(lists).reduce((sum, list) => sum + list.offsetHeight, 0); diff --git a/apps/web/src/components/chat/ThreadServersPanel.tsx b/apps/web/src/components/chat/ThreadServersPanel.tsx index f1c8e1a1808f1..517fe8f4bca90 100644 --- a/apps/web/src/components/chat/ThreadServersPanel.tsx +++ b/apps/web/src/components/chat/ThreadServersPanel.tsx @@ -94,7 +94,11 @@ export function ThreadServersPanel(props: { }; return ( - +
    {servers.map((server) => { const key = serverKey(server);