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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw
This commit is contained in:
parent
0c6fafbf60
commit
ea8715c9c4
1 changed files with 28 additions and 19 deletions
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in a new issue