Make ViewHeader and ServerStatusIndicator responsive

Header now adapts cleanly across widths instead of wrapping or clipping:

- LeftSection/RightSection are symmetric (`flex: 1, miw: 0, wrap: nowrap`),
  so the natural-width CenterSection sits visually centered between them.
  Server name truncates with ellipsis when the left slice is too narrow.
- Below `md` (992px) the SegmentedControl swaps for a Select dropdown so
  the tab labels never have to shrink or wrap.
- Below `sm` (768px) the "Disconnect" button collapses to an MdLinkOff
  ActionIcon (with `aria-label` + `title` for the tooltip).
- Below `lg` (1200px) ServerStatusIndicator hides its text label and shows
  only the colored dot (full label still available as a tooltip on hover),
  freeing space so the Disconnect button stops getting truncated at typical
  desktop widths.

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

clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx

@@ -1,4 +1,5 @@
 import { Group, Paper, Text } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
 import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 
 export interface ServerStatusIndicatorProps {
@@ -42,13 +43,16 @@ export function ServerStatusIndicator({
   latencyMs,
   retryCount,
 }: ServerStatusIndicatorProps) {
+  const showLabel = useMediaQuery("(min-width: 1200px)");
+  const label = getLabel(status, latencyMs, retryCount);
   return (
     <Group gap="xs">
       <Dot
         bg={statusColorVar[status]}
         className={status === "connecting" ? "inspector-pulse" : undefined}
+        title={showLabel ? undefined : label}
       />
-      <Text size="sm">{getLabel(status, latencyMs, retryCount)}</Text>
+      {showLabel && <Text size="sm">{label}</Text>}
     </Group>
   );
 }