diff --git a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.test.tsx b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.test.tsx
index 50ce1b62..79ab1449 100644
--- a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.test.tsx
+++ b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.test.tsx
@@ -18,4 +18,14 @@ describe("PinColumnButton", () => {
await user.click(screen.getByRole("button", { name: "Pin as column" }));
expect(onPin).toHaveBeenCalledTimes(1);
});
+
+ it("uses a custom accessible label when provided", () => {
+ renderWithMantine(
+ ,
+ );
+ expect(
+ screen.getByRole("button", { name: "Open monitoring column" }),
+ ).toBeInTheDocument();
+ expect(screen.queryByRole("button", { name: "Pin as column" })).toBeNull();
+ });
});
diff --git a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
index 8689eaae..d101d90a 100644
--- a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
+++ b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
@@ -4,23 +4,24 @@ import { TbLayoutSidebarRightExpand } from "react-icons/tb";
export interface PinColumnButtonProps {
/** Pin this screen into the monitoring column to the right. */
onPin: () => void;
+ /** Accessible label. Defaults to "Pin as column" (its monitor-screen use). */
+ label?: string;
}
/**
- * Toolbar button that pins the owning monitor screen (Logs / Protocol / 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. Styled
- * to match the panel's expand/collapse `ListToggle` (subtle icon button).
+ * Toolbar button that opens the resizable monitoring column on the right of the
+ * InspectorView (#1616). On a monitor screen (Logs / Protocol / Network) it pins
+ * that screen in as a column; on the server list it just opens the column (a
+ * different `label`). Distinct from `PinToggle` (which pins individual history
+ * entries) — this one opens a side column, so it uses a right-sidebar glyph.
+ * Styled to match the panel's expand/collapse `ListToggle` (subtle icon button).
*/
-export function PinColumnButton({ onPin }: PinColumnButtonProps) {
+export function PinColumnButton({
+ onPin,
+ label = "Pin as column",
+}: PinColumnButtonProps) {
return (
-