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

web: pin Server/Client Settings modal header while body scrolls (#1753)

Browse source 
* web: pin Server/Client Settings modal header while body scrolls (#1698)

Expanding enough accordion sections grew the Server Settings modal past the
viewport, so the whole modal scrolled and carried the header (title + close)
out of view. The header was a custom Group inside the modal body, and the modal
used no `scrollAreaComponent`, so overflow was not confined to the body.

Switch both the Server Settings and Client Settings modals from the default
`<Modal>` (which always wraps children in `Modal.Body`) to the compound
`Modal.Root`/`Modal.Content`/`Modal.Header`/`Modal.Body` API, moving the
toggle/title/close row into `Modal.Header` (sticky by design) and setting
`scrollAreaComponent={ScrollArea.Autosize}` so only the body scrolls.
`Modal.Root` keeps the close-on-escape / close-on-click-outside / focus-trap /
scroll-lock / portal defaults; `transitionProps` restores the fade-down
animation the `<Modal>` wrapper otherwise supplies. Client Settings does not yet
have enough content to scroll but is kept consistent per the issue.

Closes #1698

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5

* docs(pr-screenshots): Server Settings modal sticky-header proof (#1698)

Two frames from the ServerSettingsModal story (all sections expanded, short
viewport): header pinned at the top of the scroll and again scrolled down,
showing it stays put while only the body scrolls.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5

* web: move Modal.Root fade-down transition into the theme (#1698 review)

Addresses the review note on PR #1753: the `transitionProps={{ transition:
"fade-down", duration: 200 }}` literal was duplicated in both settings modals to
restore the animation `<Modal>` defaults to but `Modal.Root` doesn't inherit.
Move it to a `ThemeModalRoot` (`Modal.Root.extend`) registered under the
`ModalRoot` theme key, mirroring the existing `ThemeScrollAreaAutosize`
precedent. Both call sites drop the literal; any future compound `Modal.Root`
now animates consistently with every plain `<Modal>` from one source of truth.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-07-23 19:57:03 -04:00 • committed by GitHub
commit 092165476e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 136 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

15
clients/web/src/theme/Modal.ts
View file

@ -12,3 +12,18 @@ export const ThemeModal = Modal.extend({
closeButtonProps: { "aria-label": "Close" },
},
});
/**
* Restore the fade-down open/close animation on the compound `Modal.Root` API.
* The default `<Modal>` wrapper hardcodes `transitionProps: { transition:
* "fade-down", duration: 200 }`, but `Modal.Root` does not inherit it — so
* modals built from `Modal.Root` (e.g. Server/Client Settings, which need a
* sticky `Modal.Header` + scrollable `Modal.Body`, see #1698) would otherwise
* animate differently from every plain `<Modal>`. Setting it here keeps them
* consistent app-wide without repeating the literal at each call site.
*/
export const ThemeModalRoot = Modal.Root.extend({
defaultProps: {
transitionProps: { transition: "fade-down", duration: 200 },
},
});

2
clients/web/src/theme/index.ts
View file

@ -10,7 +10,7 @@ export { ThemeCode } from "./Code";
export { ThemeFlex } from "./Flex";
export { ThemeGroup } from "./Group";
export { ThemeInput } from "./Input";
export { ThemeModal } from "./Modal";
export { ThemeModal, ThemeModalRoot } from "./Modal";
export { ThemePaper } from "./Paper";
export { ThemeScrollArea, ThemeScrollAreaAutosize } from "./ScrollArea";
export { ThemeSelect } from "./Select";

2
clients/web/src/theme/theme.ts
View file

@ -13,6 +13,7 @@ import {
ThemeGroup,
ThemeInput,
ThemeModal,
ThemeModalRoot,
ThemePaper,
ThemeScrollArea,
ThemeScrollAreaAutosize,
@ -194,6 +195,7 @@ export const theme = createTheme({
Group: ThemeGroup,
Input: ThemeInput,
Modal: ThemeModal,
ModalRoot: ThemeModalRoot,
Paper: ThemePaper,
ScrollArea: ThemeScrollArea,
ScrollAreaAutosize: ThemeScrollAreaAutosize,