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/screens/ServerListScreen/ServerListScreen.tsx

@@ -147,7 +147,17 @@ export function ServerListScreen({
 
   const grid = (
     <SimpleGrid
-      cols={{ base: 1, sm: 2, lg: 3 }}
+      // Container queries (not viewport) so column count tracks the actual
+      // space the grid occupies. The 2- and 3-column thresholds (1040px /
+      // 1560px) keep each card ≥ ~505px wide at the switch point: container =
+      // N·card + (N−1)·gap with gap = lg spacing (20px), i.e. 1040 = 2·510+20
+      // and 1560 = 3·507+40. Below ~500px a connected card's action row
+      // (Clone/Edit/Remove + Connection Info/Settings, ~440px with padding)
+      // wraps and stacks, making that card taller than its neighbours; dropping
+      // to fewer, wider columns instead keeps every card the same height.
+      // (#1528)
+      type="container"
+      cols={{ base: 1, "1040px": 2, "1560px": 3 }}
       spacing="lg"
       className="grid-align-start"
     >