From b419065d8d4d957ddb361fd1fee2a9d98f565922 Mon Sep 17 00:00:00 2001
From: Robert ONeill <robertdoneill@gmail.com>
Date: Thu, 29 Oct 2026 22:06:43 -0500
Subject: [PATCH] fix: keep the command palette field's focus outline inside
 the dialog

The search field fills the header of a dialog with overflow hidden, so the
global focus outline, drawn 2px outside it, lost its top edge and crossed
the header's bottom border. focus-inset draws it inside the field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 components/command-palette/__tests__/command-palette.test.tsx | 3 +++
 components/command-palette/command-palette.tsx                | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/command-palette/__tests__/command-palette.test.tsx b/components/command-palette/__tests__/command-palette.test.tsx
index c19a790e9..2bd4fae1e 100644
--- a/components/command-palette/__tests__/command-palette.test.tsx
+++ b/components/command-palette/__tests__/command-palette.test.tsx
@@ -53,6 +53,9 @@ describe('command palette', () => {
     const input = screen.getByRole('combobox');
     expect(input).toHaveFocus();
     expect(input).toHaveAttribute('aria-controls', screen.getByRole('listbox').id);
+    // The field fills the header of a dialog that clips its overflow: the
+    // focus outline goes inside it, or the dialog cuts its top edge off.
+    expect(input).toHaveClass('focus-inset');
 
     act(() => { fireEvent.keyDown(input, { key: 'Escape' }); });
     expect(screen.queryByRole('dialog')).toBeNull();
diff --git a/components/command-palette/command-palette.tsx b/components/command-palette/command-palette.tsx
index 5e076f2d5..dee815fb7 100644
--- a/components/command-palette/command-palette.tsx
+++ b/components/command-palette/command-palette.tsx
@@ -347,7 +347,7 @@ function CommandPalette({ onClose, onShowShortcuts }: { onClose: () => void; onS
             placeholder={t("placeholder")}
             autoComplete="off"
             spellCheck={false}
-            className="h-12 flex-1 min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+            className="h-12 flex-1 min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-inset"
           />
           <kbd className="hidden sm:inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground">Esc</kbd>
           {/* Full screen on a phone: no backdrop to tap and no Escape key (R4). */}