fix(web): keep server cards a fixed height (#1528) (#1530)

* fix(web): keep server cards a fixed height (#1528)

Two causes made server cards ragged-height:

1. The command/URL box wrapped long content onto multiple lines, growing
   the card. Add a `nowrap` Code variant (single line, ellipsis on
   overflow) and a `wrap` prop on ContentViewer (default true); ServerCard
   passes `wrap={false}`. The full value stays available via the copy
   button.

2. At ~1000-1500px the grid packed cards narrow enough that a connected
   card's action row (Clone/Edit/Remove + Connection Info/Settings) wrapped
   and stacked. Switch the SimpleGrid to container queries with thresholds
   that keep every card >= ~500px wide at each column count, so it drops to
   fewer/wider columns instead of wrapping.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): address review — correct threshold comment, single-line note, title tooltip

- Correct the column-threshold comment in ServerListScreen: the values
  (1040/1560) use N gaps, not N−1; restate the formula accurately so the
  numbers aren't "fixed" to match a wrong formula later.
- Note in the ContentViewer `wrap` JSDoc that `false` is for single-line
  values only (nowrap collapses embedded newlines).
- Add a native `title` tooltip to the non-wrapping Code box so a clipped
  command/URL is readable on hover, not only via copy. Covered by tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/src/components/elements/ContentViewer/ContentViewer.test.tsx

@@ -120,6 +120,34 @@ describe("ContentViewer", () => {
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
   });
 
+  it("renders plain text in a wrapping code block by default", () => {
+    const block: ContentBlock = { type: "text", text: "some long command" };
+    const { container } = renderWithMantine(<ContentViewer block={block} />);
+    expect(container.querySelector(".mantine-Code-root")).toHaveAttribute(
+      "data-variant",
+      "wrapping",
+    );
+  });
+
+  it("renders plain text in a non-wrapping code block when wrap is false", () => {
+    const block: ContentBlock = { type: "text", text: "some long command" };
+    const { container } = renderWithMantine(
+      <ContentViewer block={block} wrap={false} />,
+    );
+    const code = container.querySelector(".mantine-Code-root");
+    expect(code).toHaveAttribute("data-variant", "nowrap");
+    // Full value exposed on hover since it may be clipped with an ellipsis.
+    expect(code).toHaveAttribute("title", "some long command");
+  });
+
+  it("does not set a title tooltip when wrapping (default)", () => {
+    const block: ContentBlock = { type: "text", text: "some long command" };
+    const { container } = renderWithMantine(<ContentViewer block={block} />);
+    expect(container.querySelector(".mantine-Code-root")).not.toHaveAttribute(
+      "title",
+    );
+  });
+
   it("renders text as markdown when mimeType is text/markdown", () => {
     const block: ContentBlock = {
       type: "text",