modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

web: server-screen, footer, monitoring-sidebar, and responsive-header polish (#1683)
Some checks failed
Run install, format, lint, build, and test on every push / build (push) Has been cancelled
Details
Run install, format, lint, build, and test on every push / publish (push) Has been cancelled
Details
Run install, format, lint, build, and test on every push / publish-github-container-registry (push) Has been cancelled
Details

Browse source 
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)
This commit is contained in:
Cliff Hall 2026-07-14 08:55:39 -04:00 • committed by GitHub
commit 8d33e76f97
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 707 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

6
clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.tsx
View file

@ -1,5 +1,5 @@
import type { ReactNode } from "react";
import { Divider, Stack } from "@mantine/core";
import { Stack } from "@mantine/core";
import { MonitoringControls } from "../MonitoringControls/MonitoringControls";
import { ScreenStage } from "../../elements/ScreenStage/ScreenStage";
@ -22,9 +22,12 @@ export interface MonitoringScreenProps {
// Fills the pinned column: a fixed controls row on top and the selected screen
// filling the remaining height below (mih:0 lets the inner ScrollArea bound).
// `pt: md` gives the controls a little breathing room below the header instead
// of sitting flush against it.
const ColumnLayout = Stack.withProps({
h: "100%",
gap: 0,
pt: "md",
});
// Relative-positioned host so each tab's `ScreenStage` (absolutely positioned)
@ -59,7 +62,6 @@ export function MonitoringScreen({
searchValue={searchValue}
onSearchChange={onSearchChange}
/>
<Divider />
<ScreenSlot>
{tabs.map((tab) => (
<ScreenStage key={tab} active={tab === value} fill>