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

fix InlineError blank space and ElicitationUrlPanel URL overflow

Browse source 
Only render InlineError details Stack when there is content to show.
Add wrapping Code theme variant for long URLs that would push buttons
offscreen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-22 18:49:26 -04:00
commit 4a4818e933
3 changed files with 37 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

45
clients/web/src/components/atoms/InlineError/InlineError.tsx
View file

@ -16,28 +16,33 @@ export function InlineError({
maxRetries, maxRetries,
docLink, docLink,
}: InlineErrorProps) { }: InlineErrorProps) {
const hasDetails =
retryCount !== undefined || details !== undefined || docLink !== undefined;
return ( return (
<Alert color="red" variant="light" title={message}> <Alert color="red" variant="light" title={message}>
<Stack gap="xs"> {hasDetails && (
{retryCount !== undefined && ( <Stack gap="xs">
<Text size="sm"> {retryCount !== undefined && (
Retry attempt {retryCount} <Text size="sm">
{maxRetries !== undefined && ` of ${maxRetries}`} Retry attempt {retryCount}
</Text> {maxRetries !== undefined && ` of ${maxRetries}`}
)} </Text>
{details && ( )}
<Spoiler maxHeight={0} showLabel="Show more" hideLabel="Show less"> {details && (
<Text size="sm">{details}</Text> <Spoiler maxHeight={0} showLabel="Show more" hideLabel="Show less">
</Spoiler> <Text size="sm">{details}</Text>
)} </Spoiler>
{docLink && ( )}
<Group> {docLink && (
<Anchor href={docLink} target="_blank" size="sm"> <Group>
View Troubleshooting Guide &rarr; <Anchor href={docLink} target="_blank" size="sm">
</Anchor> View Troubleshooting Guide &rarr;
</Group> </Anchor>
)} </Group>
</Stack> )}
</Stack>
)}
</Alert> </Alert>
); );
} }

4
clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
View file

@ -35,7 +35,9 @@ export function ElicitationUrlPanel({
</Text> </Text>
<Divider /> <Divider />
<Text size="sm">The server is requesting you visit:</Text> <Text size="sm">The server is requesting you visit:</Text>
<Code block>{url}</Code> <Code block variant="wrapping">
{url}
</Code>
<Group> <Group>
<Button variant="light" onClick={onCopyUrl}> <Button variant="light" onClick={onCopyUrl}>
Copy URL Copy URL

13
clients/web/src/theme/Code.ts
View file

@ -1,9 +1,14 @@
import { Code } from "@mantine/core"; import { Code } from "@mantine/core";
export const ThemeCode = Code.extend({ export const ThemeCode = Code.extend({
styles: () => ({ styles: (_theme, props) => {
root: { const root: Record<string, string> = {
backgroundColor: "var(--inspector-surface-code)", backgroundColor: "var(--inspector-surface-code)",
}, };
}), if (props.variant === "wrapping") {
root.wordBreak = "break-all";
root.whiteSpace = "pre-wrap";
}
return { root };
},
}); });