diff --git a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
index 86467db9..cd252845 100644
--- a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
+++ b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon } from "@mantine/core";
+import { Button } from "@mantine/core";
import { TbLayoutSidebarRightExpand } from "react-icons/tb";
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
* 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) {
return (
-
-
-
+
+
);
}