From c2cf2b4a1e023f3e9de80b8889971f4d04ded9c7 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Sat, 18 Jul 2026 23:15:13 -0700
Subject: [PATCH] Studio: keep the permission pill label when composer pills
 collapse (#7231)

With 5 or more pills active the composer collapses every pill to an
icon, which hid the Bypass permissions label behind a small glyph.
Exempt the permission pill via data-keep-label so it always shows its
label, with the collapsed icons lining up to its right. Since the pill
is never icon-only now, drop the compact-mode fallthrough in the glyph
off switch so it works while the other pills are collapsed.
---
 .../src/features/chat/permission-mode-select.tsx    | 13 ++++---------
 studio/frontend/src/index.css                       |  4 +++-
 2 files changed, 7 insertions(+), 10 deletions(-)

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. */}
           <span
             role="button"
             aria-label="Turn off bypass permissions"
             tabIndex={-1}
             onPointerDown={(e) => {
-              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) {