From 92dc39da26db72d71543aedab969b507d098ca15 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Mon, 9 Nov 2026 09:13:22 +0000
Subject: [PATCH] fix(web): make composer popups readable and consistently
 spaced

---
 .../chat/ComposerFooterControls.tsx           | 134 +++++++++---------
 .../chat/ComposerPendingApprovalActions.tsx   |   2 +-
 .../components/chat/useComposerMenuItems.ts   |   4 +-
 apps/web/src/components/ui/autocomplete.tsx   |   2 +-
 apps/web/src/components/ui/menu.tsx           |   2 +-
 5 files changed, 74 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerFooterControls.tsx b/apps/web/src/components/chat/ComposerFooterControls.tsx
index 255167b681146..993adb04298c6 100644
--- a/apps/web/src/components/chat/ComposerFooterControls.tsx
+++ b/apps/web/src/components/chat/ComposerFooterControls.tsx
@@ -3,7 +3,7 @@ import { createModelSelection } from "@t3tools/shared/model";
 import { type ComponentProps, memo, useId, useRef, useState } from "react";
 
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
+import { Menu, MenuGroup, MenuGroupLabel, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { ComposerControl, ComposerControlIcon } from "./ComposerControl";
 import { focusRequestedPermission, useComposerMenuProps } from "./composerEventScope";
@@ -113,73 +113,75 @@ export function ComposerPermissionsSection(props: {
     supervisedRuntimeModeOption;
   const descriptionId = useId();
   return (
-    <div data-composer-permissions className="grid w-72 gap-1.5 px-2 py-1.5">
-      <div className="text-caption text-muted-foreground">Permissions</div>
-      <MenuPrimitive.RadioGroup
-        aria-label="Permissions"
-        value={props.runtimeMode}
-        onValueChange={(value: RuntimeMode) => {
-          if (value !== props.runtimeMode) props.onRuntimeModeChange(value);
-        }}
-        className="flex rounded-lg surface-well 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;
-          const items = Array.from(
-            event.currentTarget.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
-          );
-          const index = items.findIndex((item) => item === document.activeElement);
-          const next = items[index + (event.key === "ArrowRight" ? 1 : -1)];
-          if (index < 0 || !next) return;
-          event.preventDefault();
-          event.stopPropagation();
-          next.focus();
-        }}
-      >
-        {props.runtimeModeOptions.map((option) => {
-          const OptionIcon = option.icon;
-          return (
-            <MenuPrimitive.RadioItem
-              key={option.mode}
-              value={option.mode}
-              disabled={option.disabledReason !== undefined}
-              label={option.label}
-              aria-label={option.label}
-              aria-describedby={`${descriptionId}-${option.mode}`}
-              closeOnClick
-              onPointerEnter={() => setPreviewMode(option.mode)}
-              onPointerLeave={() => setPreviewMode(null)}
-              onFocus={() => setPreviewMode(option.mode)}
-              onBlur={() => setPreviewMode(null)}
-              className="flex h-6 flex-1 cursor-pointer items-center justify-center text-muted-foreground outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40 first:rounded-l-md last:rounded-r-md data-checked:surface-selected-soft data-checked:text-strong-foreground data-highlighted:text-foreground not-data-checked:data-highlighted:surface-ghost-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-            >
-              <OptionIcon aria-hidden="true" className="size-3.5" />
-            </MenuPrimitive.RadioItem>
-          );
-        })}
-      </MenuPrimitive.RadioGroup>
-      {/* Static per-mode descriptions for screen readers; the preview below is visual only. */}
-      {props.runtimeModeOptions.map((option) => (
-        <span key={option.mode} id={`${descriptionId}-${option.mode}`} className="sr-only">
-          {option.disabledReason ?? option.description}
-        </span>
-      ))}
-      <div className="grid gap-0.5" aria-hidden="true">
-        <span
-          className={
-            shownMode === props.runtimeMode
-              ? "text-foreground text-label"
-              : "text-muted-foreground text-label"
-          }
+    <MenuGroup data-composer-permissions className="w-72">
+      <MenuGroupLabel>Permissions</MenuGroupLabel>
+      <div className="grid gap-1.5 px-2 pb-1.5">
+        <MenuPrimitive.RadioGroup
+          aria-label="Permissions"
+          value={props.runtimeMode}
+          onValueChange={(value: RuntimeMode) => {
+            if (value !== props.runtimeMode) props.onRuntimeModeChange(value);
+          }}
+          className="flex rounded-lg surface-well 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;
+            const items = Array.from(
+              event.currentTarget.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
+            );
+            const index = items.findIndex((item) => item === document.activeElement);
+            const next = items[index + (event.key === "ArrowRight" ? 1 : -1)];
+            if (index < 0 || !next) return;
+            event.preventDefault();
+            event.stopPropagation();
+            next.focus();
+          }}
         >
-          {shown.label}
-        </span>
-        {/* Two lines reserved so the menu does not shift while you preview modes. */}
-        <span className="min-h-8 text-muted-foreground text-meta leading-4">
-          {shown.disabledReason ?? shown.description}
-        </span>
+          {props.runtimeModeOptions.map((option) => {
+            const OptionIcon = option.icon;
+            return (
+              <MenuPrimitive.RadioItem
+                key={option.mode}
+                value={option.mode}
+                disabled={option.disabledReason !== undefined}
+                label={option.label}
+                aria-label={option.label}
+                aria-describedby={`${descriptionId}-${option.mode}`}
+                closeOnClick
+                onPointerEnter={() => setPreviewMode(option.mode)}
+                onPointerLeave={() => setPreviewMode(null)}
+                onFocus={() => setPreviewMode(option.mode)}
+                onBlur={() => setPreviewMode(null)}
+                className="flex h-6 flex-1 cursor-pointer items-center justify-center text-muted-foreground outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40 first:rounded-l-md last:rounded-r-md data-checked:surface-selected-soft data-checked:text-strong-foreground data-highlighted:text-foreground not-data-checked:data-highlighted:surface-ghost-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+              >
+                <OptionIcon aria-hidden="true" className="size-3.5" />
+              </MenuPrimitive.RadioItem>
+            );
+          })}
+        </MenuPrimitive.RadioGroup>
+        {/* Static per-mode descriptions for screen readers; the preview below is visual only. */}
+        {props.runtimeModeOptions.map((option) => (
+          <span key={option.mode} id={`${descriptionId}-${option.mode}`} className="sr-only">
+            {option.disabledReason ?? option.description}
+          </span>
+        ))}
+        <div className="grid gap-0.5" aria-hidden="true">
+          <span
+            className={
+              shownMode === props.runtimeMode
+                ? "text-foreground text-label"
+                : "text-muted-foreground text-label"
+            }
+          >
+            {shown.label}
+          </span>
+          {/* Two lines reserved so the menu does not shift while you preview modes. */}
+          <span className="min-h-8 text-muted-foreground text-meta leading-4">
+            {shown.disabledReason ?? shown.description}
+          </span>
+        </div>
       </div>
-    </div>
+    </MenuGroup>
   );
 }
 
diff --git a/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx b/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
index 2787a3f6ee339..c78d0217029a5 100644
--- a/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
+++ b/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
@@ -118,7 +118,7 @@ export function ComposerPendingApprovalActions({
           <Menu>
             <MenuTrigger
               disabled={disabled}
-              render={<Button size="icon-sm" variant="ghost" aria-label="More approval options" />}
+              render={<Button size="sm" variant="ghost" aria-label="More approval options" />}
             >
               More
             </MenuTrigger>
diff --git a/apps/web/src/components/chat/useComposerMenuItems.ts b/apps/web/src/components/chat/useComposerMenuItems.ts
index ace34db33a335..d289b9e286f54 100644
--- a/apps/web/src/components/chat/useComposerMenuItems.ts
+++ b/apps/web/src/components/chat/useComposerMenuItems.ts
@@ -463,7 +463,9 @@ export function useComposerMenuItems({
         : "No pull requests found in this repository.";
     }
     return composerTriggerKind === "path"
-      ? "No matching files or folders."
+      ? pathTriggerQuery.trim()
+        ? "No matching files or folders."
+        : "Type to search files and folders."
       : "No matching command.";
   })();
 
diff --git a/apps/web/src/components/ui/autocomplete.tsx b/apps/web/src/components/ui/autocomplete.tsx
index 16586bc431761..5c4bf48cf3935 100644
--- a/apps/web/src/components/ui/autocomplete.tsx
+++ b/apps/web/src/components/ui/autocomplete.tsx
@@ -154,7 +154,7 @@ function AutocompleteGroup({ className, ...props }: AutocompletePrimitive.Group.
   );
 }
 
-const GROUP_LABEL_CLASS_NAME = "px-2 py-1.5 text-meta text-dim-foreground";
+const GROUP_LABEL_CLASS_NAME = "px-2 py-1.5 text-meta text-muted-foreground";
 
 function AutocompleteGroupLabel({ className, ...props }: AutocompletePrimitive.GroupLabel.Props) {
   return (
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 59e81cc9a9cc7..c9ff70e1cc4a4 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -314,7 +314,7 @@ function MenuGroupLabel({
   return (
     <MenuPrimitive.GroupLabel
       className={cn(
-        "px-2 py-1.5 text-meta text-dim-foreground data-inset:ps-9 sm:data-inset:ps-8",
+        "px-2 py-1.5 text-meta text-muted-foreground data-inset:ps-9 sm:data-inset:ps-8",
         className,
       )}
       data-inset={inset}