From daf736c6e7ee062b681c4f4a6175830c6224a5dd Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 8 Jul 2026 19:26:35 -0400
Subject: [PATCH] style(web): match the pin-as-column button to the
 expand/collapse toggle

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>
---
 .../PinColumnButton/PinColumnButton.tsx         | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

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 (
-    <ActionIcon
-      variant="default"
-      size="lg"
+    <Button
+      size="sm"
+      variant="subtle"
       aria-label="Pin as column"
       onClick={onPin}
     >
-      <TbLayoutSidebarRightExpand size={18} />
-    </ActionIcon>
+      <TbLayoutSidebarRightExpand size={20} />
+    </Button>
   );
 }