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/theme/Code.ts

@@ -9,6 +9,14 @@ export const ThemeCode = Code.extend({
       root.wordBreak = "break-all";
       root.whiteSpace = "pre-wrap";
     }
+    if (props.variant === "nowrap") {
+      // Single line, fixed height: clip overflow with an ellipsis rather than
+      // wrapping onto new lines (which would grow the container's height). The
+      // full value stays available via the adjacent copy button.
+      root.whiteSpace = "nowrap";
+      root.overflow = "hidden";
+      root.textOverflow = "ellipsis";
+    }
     return { root };
   },
 });