web: server-screen, footer, monitoring-sidebar, and responsive-header polish (#1683)

Closes #1682

Server-screen, footer, monitoring-sidebar, and responsive-header polish: connected-card highlight/scroll + Failed status, footer row + MCP-docs tooltip, Servers box, card-surface refresh (gray-0 entry cards + white code), monitoring-sidebar layout, a 1280px responsive floor honored by the header (always-icon Disconnect, always-SegmentedControl tabs, 1500px status text, always-available sidebar), a horizontally-scrollable long resource URI in the compact Protocol entry, and copy buttons beside resource URIs / network URLs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

clients/web/src/App.css

@@ -31,10 +31,16 @@
      otherwise defaults to pure white. */
   --inspector-surface-body: var(--mantine-color-gray-1);
   --inspector-surface-card: var(--mantine-color-white);
-  /* Recessed list-item surface (Protocol/Network message cards): light-grey in
-     light mode so the entries read as sunk into their white panel; keeps the
-     standard card tone in dark (overridden below). */
-  --inspector-surface-inset: var(--mantine-color-gray-1);
+  /* Server-card fill: a hair lighter than the grey app background (`gray-0` vs
+     the body's `gray-1`) so the cards read as faintly raised on the white
+     Servers box. Light mode only; dark tracks the standard card surface. */
+  --inspector-surface-card-server: var(--mantine-color-gray-0);
+  /* Entry-card surface (Protocol / Network / Task message cards): the faint
+     `gray-0` grey — a hair lighter than the `gray-1` app background and matching
+     the server cards — so the entries read as soft cards on their white panel
+     (their inner Code blocks are raised to white via the `inset` variant). Keeps
+     the standard card tone in dark (overridden below). */
+  --inspector-surface-inset: var(--mantine-color-gray-0);
   /* Code/content surfaces match the light-grey body so they stay distinct
      against the white cards (the Code block has no border of its own). Dark
      mode keeps the darker `dark-9` inset below. */
@@ -125,6 +131,9 @@
      tab bar share `gray-1`. Cards (`gray-9`) still sit a step above it. */
   --inspector-surface-body: var(--mantine-color-dark-8);
   --inspector-surface-card: var(--mantine-color-gray-9);
+  /* Dark keeps server cards at the standard card surface (the lighter grey is a
+     light-mode-only treatment). */
+  --inspector-surface-card-server: var(--inspector-surface-card);
   /* Dark keeps the message cards at the standard card tone (they already
      contrast against the darker panel/body), so only light mode goes grey. */
   --inspector-surface-inset: var(--mantine-color-gray-9);
@@ -225,6 +234,21 @@ body {
   background-color: var(--inspector-surface-body);
 }
 
+/* Floor the app at 1280px so the header, split panes, and footer never reflow
+   into a broken layout; below this the whole app scrolls horizontally instead.
+   Scoped to the app mount (#root) rather than `body` so it doesn't leak into
+   Storybook, which shares App.css but renders stories into its own root.
+
+   The `transform` makes #root the containing block for the AppShell's
+   position:fixed header + footer, so they honor the 1280px floor too — spanning
+   the full 1280 and scrolling horizontally with the content — instead of staying
+   pinned to a narrower viewport. Body-portalled overlays (modals, tooltips,
+   dropdowns) render outside #root, so they stay viewport-fixed as intended. */
+#root {
+  min-width: 1280px;
+  transform: translateZ(0);
+}
+
 /* ── Animations ──────────────────────────────────────────── */
 
 @keyframes inspector-pulse {