From e7f0d3c04f7bed6c8eae0f933a3cd6699d2a477a Mon Sep 17 00:00:00 2001
From: Anthony Lio <lionnet.ant@gmail.com>
Date: Tue, 29 Sep 2026 18:17:45 +0300
Subject: [PATCH] fix(ui): popover component (#50657)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

fixture on the popover + command components

## What is the current behavior?

currently there is a misalignment in the command component <> searchbar
icon and items + the popover menu animation in is slightly scattered

## What is the new behavior?

- fixes icon alignment in command component
- updates popover animation in

`command`
| state | preview |
| -------|------|
| before | <img width="881" height="542" alt="image"
src="https://github.com/user-attachments/assets/e38aa22f-5eea-4b08-8a24-254e26bf90fe"
/> |
| after | <img width="881" height="542" alt="image"
src="https://github.com/user-attachments/assets/85608e11-8415-4d47-945f-cc13772e4ad1"
/> |

`popover`
| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/cbb2da1a-6f73-4a8d-87d6-21e8b636c110"
/> |
| after | <video
src="https://github.com/user-attachments/assets/1b0832f5-e6ac-4e93-ae78-9e0aee31205c"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
  - Adjusted command input spacing for improved visual alignment.
- Updated popover transitions with state-based fade and zoom animations,
and refined their visual origin.
  - Set a consistent size for the AI docs command icon.
- **New Features**
- Added an option to customize the command menu input wrapper’s styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx | 3 ++-
 .../ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx  | 2 +-
 packages/ui/src/components/shadcn/ui/command.tsx              | 4 ++--
 packages/ui/src/components/shadcn/ui/popover.tsx              | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
index 79036c8894d..653c9f7d8ee 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
@@ -44,7 +44,7 @@ function useFocusInputOnWiderScreens(ref: React.ForwardedRef<HTMLInputElement>)
 const CommandMenuInput = forwardRef<
   React.ElementRef<typeof CommandInput>,
   React.ComponentPropsWithoutRef<typeof CommandInput>
->(({ className, ...props }, ref) => {
+>(({ className, wrapperClassName, ...props }, ref) => {
   const inputRef = useFocusInputOnWiderScreens(ref)
 
   const query = useQuery()
@@ -123,6 +123,7 @@ const CommandMenuInput = forwardRef<
         placeholder="Run a command or search..."
         onCompositionStart={() => setImeComposing(true)}
         onCompositionEnd={() => setImeComposing(false)}
+        wrapperClassName={cn('px-4', wrapperClassName)}
         className={cn(
           'flex h-11 w-full rounded-md bg-transparent px-2 y-4 md:py-7 outline-hidden',
           'focus:shadow-none focus:ring-transparent',
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx
index 7211fa4aeb5..64fb024f6ab 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/index.tsx
@@ -30,7 +30,7 @@ const useDocsAiCommands = ({
         action: () => {
           setCommandPage(DOCS_AI_COMMANDS.PAGE_NAME, true)
         },
-        icon: () => <AiIconAnimation />,
+        icon: () => <AiIconAnimation size={20} />,
       },
     ].map(modify),
     options
diff --git a/packages/ui/src/components/shadcn/ui/command.tsx b/packages/ui/src/components/shadcn/ui/command.tsx
index 97b5c1825f5..a973f6db383 100644
--- a/packages/ui/src/components/shadcn/ui/command.tsx
+++ b/packages/ui/src/components/shadcn/ui/command.tsx
@@ -57,12 +57,12 @@ const CommandInput = React.forwardRef<
     },
     ref
   ) => (
-    <div className={cn('flex items-center border-b px-4', wrapperClassName)} cmdk-input-wrapper="">
+    <div className={cn('flex items-center border-b px-3', wrapperClassName)} cmdk-input-wrapper="">
       {showSearchIcon && <Search className="h-4 w-4 shrink-0 opacity-50" aria-hidden />}
       <CommandPrimitive.Input
         ref={ref}
         className={cn(
-          'flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50 border-none focus:ring-0',
+          'flex h-9 w-full rounded-md bg-transparent py-3 pl-2 text-sm outline-hidden placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50 border-none focus:ring-0',
           className
         )}
         {...props}
diff --git a/packages/ui/src/components/shadcn/ui/popover.tsx b/packages/ui/src/components/shadcn/ui/popover.tsx
index 55679902127..219d40c0398 100644
--- a/packages/ui/src/components/shadcn/ui/popover.tsx
+++ b/packages/ui/src/components/shadcn/ui/popover.tsx
@@ -46,7 +46,7 @@ const PopoverContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           sameWidthAsTrigger ? styles['popover-trigger-width'] : '',
-          'z-50 w-72 rounded-md border border-overlay bg-overlay p-4 text-popover-foreground shadow-md outline-hidden animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 w-72 rounded-md border border-overlay bg-overlay p-4 text-popover-foreground shadow-md outline-hidden origin-(--radix-popover-content-transform-origin) ease-enter data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           className
         )}
         {...props}