diff --git a/studio/frontend/src/features/chat/permission-mode-select.tsx b/studio/frontend/src/features/chat/permission-mode-select.tsx index 4277c1bfcf..a9cb8ce5d1 100644 --- a/studio/frontend/src/features/chat/permission-mode-select.tsx +++ b/studio/frontend/src/features/chat/permission-mode-select.tsx @@ -278,28 +278,23 @@ export function PermissionModeComposerPill({ data-pill-label={active.label} data-active={fullAccess ? "true" : "false"} data-variant={fullAccess ? "danger" : undefined} + data-keep-label="true" aria-label="Permission level for tool calls" title={`${active.label}: ${active.description}`} > {/* The icon doubles as an off switch (mirrors the MCP pill): hover swaps it to an X; clicking it turns bypass permissions Off (no - prompts, sandbox on) without opening the menu. In compact - icon-only mode the glyph is the whole button, so clicks fall - through and open the menu instead. */} + prompts, sandbox on) without opening the menu. data-keep-label + exempts this pill from compact icon-only mode, so the off switch + stays clickable even while the other pills are collapsed. */} { - if (e.currentTarget.closest('[data-pill-compact="true"]')) { - return; - } e.stopPropagation(); }} onClick={(e) => { - if (e.currentTarget.closest('[data-pill-compact="true"]')) { - return; - } e.stopPropagation(); setPermissionMode("off"); }} diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 333ed70f6a..6d4c21eec8 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -1467,7 +1467,9 @@ html[data-chat-font] .aui-root { } /* With more than 4 tools on, drop pill labels to icons only to cut clutter. - Compare keeps its label via data-keep-label. */ + Compare and the bypass-permissions pill keep their labels via + data-keep-label; the permission pill sits before the collapsed icons, so + they line up to its right. */ [data-pill-compact="true"] .composer-pill-btn:not([data-keep-label]) > span:not(.composer-pill-glyph) {