From ea8715c9c4dedb98a3ec220e55cd0ceb216deb23 Mon Sep 17 00:00:00 2001 From: cliffhall Date: Fri, 10 Jul 2026 20:49:18 -0400 Subject: [PATCH] style(web): size + space the toolbar icon buttons to match the header Make the server-list toolbar's expand/collapse toggle and open/close-monitoring icons the same width and spacing as the header's theme / client-settings icons: - ListToggle (default variant), PinColumnButton, and the MonitoringControls close button now render as `ActionIcon variant="subtle" size={36}` (glyph 20), matching the header's 36px ActionIcons, instead of wider `Button`s. - ServerListControls uses `gap="sm"` so its buttons sit the same 12px apart as the header's RightSection controls. Update a TaskListPanel test that found the toggle by a brittle `mantine-Button-root` class to select it by its accessible name instead. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw --- .../components/elements/ListToggle/ListToggle.tsx | 13 ++++++++++--- .../elements/PinColumnButton/PinColumnButton.tsx | 9 +++++---- .../MonitoringControls/MonitoringControls.tsx | 8 ++++---- .../ServerListControls/ServerListControls.tsx | 4 +++- .../groups/TaskListPanel/TaskListPanel.test.tsx | 13 ++++++------- 5 files changed, 28 insertions(+), 19 deletions(-) diff --git a/clients/web/src/components/elements/ListToggle/ListToggle.tsx b/clients/web/src/components/elements/ListToggle/ListToggle.tsx index 44085f66..cd7a0336 100644 --- a/clients/web/src/components/elements/ListToggle/ListToggle.tsx +++ b/clients/web/src/components/elements/ListToggle/ListToggle.tsx @@ -1,4 +1,4 @@ -import { ActionIcon, Button } from "@mantine/core"; +import { ActionIcon } from "@mantine/core"; import { RiExpandVerticalLine, RiCollapseVerticalLine } from "react-icons/ri"; export interface ListToggleProps { @@ -29,9 +29,16 @@ export function ListToggle({ ); } + // `size={36}` matches the header's theme / client-settings ActionIcons so the + // toolbar's toggle reads as the same size icon button. return ( - + ); } diff --git a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx index d101d90a..33204590 100644 --- a/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx +++ b/clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx @@ -1,4 +1,4 @@ -import { Button } from "@mantine/core"; +import { ActionIcon } from "@mantine/core"; import { TbLayoutSidebarRightExpand } from "react-icons/tb"; export interface PinColumnButtonProps { @@ -14,15 +14,16 @@ export interface PinColumnButtonProps { * 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). + * `size={36}` matches the header's theme / client-settings ActionIcons and the + * toolbar's `ListToggle`, so all these icon buttons share one width. */ export function PinColumnButton({ onPin, label = "Pin as column", }: PinColumnButtonProps) { return ( - + ); } diff --git a/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx b/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx index 97e9f3ee..23575337 100644 --- a/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx +++ b/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx @@ -1,4 +1,4 @@ -import { Button, Group, SegmentedControl, TextInput } from "@mantine/core"; +import { ActionIcon, Group, SegmentedControl, TextInput } from "@mantine/core"; import { TbLayoutSidebarRightCollapse } from "react-icons/tb"; import { ClearButton } from "../../elements/ClearButton/ClearButton"; @@ -69,14 +69,14 @@ export function MonitoringControls({ ) : null } /> - + ); } diff --git a/clients/web/src/components/groups/ServerListControls/ServerListControls.tsx b/clients/web/src/components/groups/ServerListControls/ServerListControls.tsx index 3c559a70..c64c2eaa 100644 --- a/clients/web/src/components/groups/ServerListControls/ServerListControls.tsx +++ b/clients/web/src/components/groups/ServerListControls/ServerListControls.tsx @@ -34,7 +34,9 @@ export function ServerListControls({ onOpenMonitor, }: ServerListControlsProps) { return ( - + // `gap="sm"` matches the header's control spacing (its RightSection group), + // so these buttons sit the same distance apart as the header icons. + diff --git a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.test.tsx b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.test.tsx index 184bcec5..ff025541 100644 --- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.test.tsx +++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.test.tsx @@ -169,13 +169,12 @@ describe("TaskListPanel", () => { screen.getAllByRole("button", { name: "Collapse" }).length, ).toBeGreaterThan(0); - const buttons = screen.getAllByRole("button"); - const toggle = buttons.find( - (b) => - b.textContent === "" && b.classList.contains("mantine-Button-root"), - ); - expect(toggle).toBeDefined(); - await user.click(toggle!); + // The ListToggle is labelled "Collapse all" / "Expand all" — distinct from + // the per-entry "Collapse" / "Expand" buttons. + const toggle = screen.getByRole("button", { + name: /Collapse all|Expand all/, + }); + await user.click(toggle); // After toggle, entries collapsed — they show Expand expect(