From 7e6b6bd3cf9a4eb8656ea85a9dbaaccc80b98334 Mon Sep 17 00:00:00 2001
From: Adamulek123 <adam.bogucki2018@gmail.com>
Date: Wed, 28 Oct 2026 15:34:19 +0100
Subject: [PATCH 1/2] fix(web): remove gaps between permission options

---
 .../chat/ComposerFooterControls.tsx           |  4 ++--
 ...omposerPermissionsSection.browser.test.tsx | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerFooterControls.tsx b/apps/web/src/components/chat/ComposerFooterControls.tsx
index 46de66194dd0d..d99e538f6fe1f 100644
--- a/apps/web/src/components/chat/ComposerFooterControls.tsx
+++ b/apps/web/src/components/chat/ComposerFooterControls.tsx
@@ -182,7 +182,7 @@ export function ComposerPermissionsSection(props: {
         onValueChange={(value: RuntimeMode) => {
           if (value !== props.runtimeMode) props.onRuntimeModeChange(value);
         }}
-        className="flex gap-0.5 rounded-lg bg-input/40 p-0.5"
+        className="flex rounded-lg bg-input/40 p-0.5"
         // Menus navigate with Up/Down only; the row reads horizontally, so Left/Right move too.
         onKeyDown={(event) => {
           if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -211,7 +211,7 @@ export function ComposerPermissionsSection(props: {
               onPointerLeave={() => setPreviewMode(null)}
               onFocus={() => setPreviewMode(option.mode)}
               onBlur={() => setPreviewMode(null)}
-              className="flex h-6 flex-1 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none data-checked:bg-input/72 data-checked:text-foreground data-highlighted:text-foreground not-data-checked:data-highlighted:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+              className="flex h-6 flex-1 cursor-pointer items-center justify-center text-muted-foreground outline-none first:rounded-l-md last:rounded-r-md data-checked:bg-input/72 data-checked:text-foreground data-highlighted:text-foreground not-data-checked:data-highlighted:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
             >
               <OptionIcon aria-hidden="true" className="size-3.5" />
             </MenuPrimitive.RadioItem>
diff --git a/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx b/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
index 74ab036f411e1..75bedaf8a14ae 100644
--- a/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
+++ b/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
@@ -3,6 +3,7 @@ import { type ReactNode, useRef, useState } from "react";
 import { expect, it, vi } from "vite-plus/test";
 import { page, userEvent } from "vite-plus/test/browser";
 
+import "../../index.css";
 import { render } from "../../../test/render";
 import { ComposerHandleContext, type ComposerHandleRef } from "../../composerHandleContext";
 import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../ui/menu";
@@ -87,6 +88,26 @@ it("marks the current mode as checked and closes on Escape", async () => {
   await expect.element(screen.getByRole("button", { name: "Effort" })).toHaveFocus();
 });
 
+it("keeps the space between permission options clickable", async () => {
+  await using screen = await render(<EffortMenu />, { router: false });
+  await userEvent.click(screen.getByRole("button", { name: "Effort" }));
+  const items = options.map((option) =>
+    page.getByRole("menuitemradio", { name: option.label }).element(),
+  );
+
+  for (let i = 0; i < items.length - 1; i++) {
+    const left = items[i]!;
+    const right = items[i + 1]!;
+    const leftRect = left.getBoundingClientRect();
+    const rightRect = right.getBoundingClientRect();
+    expect(rightRect.left - leftRect.right).toBeLessThanOrEqual(0);
+    for (const y of [leftRect.top + 1, leftRect.top + leftRect.height / 2]) {
+      expect(left.contains(document.elementFromPoint(leftRect.right - 1.5, y))).toBe(true);
+      expect(right.contains(document.elementFromPoint(rightRect.left + 1.5, y))).toBe(true);
+    }
+  }
+});
+
 // The real composer menu focus rule (useComposerMenuProps), with a stub composer handle.
 function withComposer(children: ReactNode) {
   const handle = { focusAtEnd: vi.fn() };

From 2e2e50acdc17a6e650f2b2410afd06079288558b Mon Sep 17 00:00:00 2001
From: Adamulek123 <adam.bogucki2018@gmail.com>
Date: Wed, 28 Oct 2026 15:48:25 +0100
Subject: [PATCH 2/2] test(web): remove permission spacing test

---
 ...omposerPermissionsSection.browser.test.tsx | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx b/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
index 75bedaf8a14ae..74ab036f411e1 100644
--- a/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
+++ b/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
@@ -3,7 +3,6 @@ import { type ReactNode, useRef, useState } from "react";
 import { expect, it, vi } from "vite-plus/test";
 import { page, userEvent } from "vite-plus/test/browser";
 
-import "../../index.css";
 import { render } from "../../../test/render";
 import { ComposerHandleContext, type ComposerHandleRef } from "../../composerHandleContext";
 import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../ui/menu";
@@ -88,26 +87,6 @@ it("marks the current mode as checked and closes on Escape", async () => {
   await expect.element(screen.getByRole("button", { name: "Effort" })).toHaveFocus();
 });
 
-it("keeps the space between permission options clickable", async () => {
-  await using screen = await render(<EffortMenu />, { router: false });
-  await userEvent.click(screen.getByRole("button", { name: "Effort" }));
-  const items = options.map((option) =>
-    page.getByRole("menuitemradio", { name: option.label }).element(),
-  );
-
-  for (let i = 0; i < items.length - 1; i++) {
-    const left = items[i]!;
-    const right = items[i + 1]!;
-    const leftRect = left.getBoundingClientRect();
-    const rightRect = right.getBoundingClientRect();
-    expect(rightRect.left - leftRect.right).toBeLessThanOrEqual(0);
-    for (const y of [leftRect.top + 1, leftRect.top + leftRect.height / 2]) {
-      expect(left.contains(document.elementFromPoint(leftRect.right - 1.5, y))).toBe(true);
-      expect(right.contains(document.elementFromPoint(rightRect.left + 1.5, y))).toBe(true);
-    }
-  }
-});
-
 // The real composer menu focus rule (useComposerMenuProps), with a stub composer handle.
 function withComposer(children: ReactNode) {
   const handle = { focusAtEnd: vi.fn() };