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

style(web): match the pin-as-column button to the expand/collapse toggle

Browse source 
Render PinColumnButton as a subtle size-sm Button with a size-20 icon, the same
style as the panel's ListToggle, instead of a default ActionIcon.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-07-08 19:26:35 -04:00
commit daf736c6e7
1 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
View file

@ -1,4 +1,4 @@
import { ActionIcon } from "@mantine/core"; import { Button } from "@mantine/core";
import { TbLayoutSidebarRightExpand } from "react-icons/tb"; import { TbLayoutSidebarRightExpand } from "react-icons/tb";
export interface PinColumnButtonProps { export interface PinColumnButtonProps {
@ -7,20 +7,21 @@ export interface PinColumnButtonProps {
} }
/** /**
* Toolbar icon that pins the owning monitor screen (Logs / History / Network) * Toolbar button that pins the owning monitor screen (Logs / History / Network)
* into the resizable column on the right of the InspectorView (#1616). Distinct * into the resizable column on the right of the InspectorView (#1616). Distinct
* from `PinToggle` (which pins individual history entries) — this one opens a * from `PinToggle` (which pins individual history entries) — this one opens a
* side column, so it uses a right-sidebar glyph and an "as column" label. * side column, so it uses a right-sidebar glyph and an "as column" label. Styled
* to match the panel's expand/collapse `ListToggle` (subtle icon button).
*/ */
export function PinColumnButton({ onPin }: PinColumnButtonProps) { export function PinColumnButton({ onPin }: PinColumnButtonProps) {
return ( return (
<ActionIcon <Button
variant="default" size="sm"
size="lg" variant="subtle"
aria-label="Pin as column" aria-label="Pin as column"
onClick={onPin} onClick={onPin}
> >
<TbLayoutSidebarRightExpand size={18} /> <TbLayoutSidebarRightExpand size={20} />
</ActionIcon> </Button>
); );
} }