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);