diff --git a/packages/session-ui/component-tests/tool-group.spec.ts b/packages/session-ui/component-tests/tool-group.spec.ts index e924f34d1e2..13eaf94a694 100644 --- a/packages/session-ui/component-tests/tool-group.spec.ts +++ b/packages/session-ui/component-tests/tool-group.spec.ts @@ -74,6 +74,12 @@ story("summarizes subagents as Agent while retaining their card titles", async ( await expect( group.locator('[data-component="context-tool-group-trigger"] [data-slot="basic-tool-tool-title"]'), ).toHaveText("4 Shell, Read, Agent") + const gap = await group.evaluate((element) => { + const title = element.querySelector('[data-component="context-tool-group-trigger"]')!.getBoundingClientRect() + const arrow = element.querySelector('[data-slot="collapsible-arrow-icon"]')!.getBoundingClientRect() + return arrow.left - title.right + }) + expect(gap).toBeLessThanOrEqual(8) await expect(group.locator('[data-component="task-tool-title"]')).toHaveText(["General", "Explore"]) }) diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css index 3f21d380ebb..04b89d063e5 100644 --- a/packages/session-ui/src/components/basic-tool.css +++ b/packages/session-ui/src/components/basic-tool.css @@ -173,6 +173,10 @@ [data-component="collapsible"].tool-collapsible[data-compact="true"] > [data-slot="collapsible-trigger"] { height: 28px; + [data-slot="collapsible-arrow"] { + width: 16px; + } + [data-component="tool-trigger"], [data-slot="basic-tool-tool-info-main"] { gap: 6px;