From f8f37cf0389f9243fa2b91e36253d3c37578751e Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Fri, 20 Sep 2024 10:13:57 -0400
Subject: [PATCH] fix(command menu): minor styling issues with scrollbar
 (#29403)

---
 apps/docs/features/command/CommandMenu.tsx                | 8 +-------
 packages/ui-patterns/CommandMenu/api/CommandMenu.tsx      | 2 +-
 .../CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx         | 6 ++----
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/docs/features/command/CommandMenu.tsx b/apps/docs/features/command/CommandMenu.tsx
index e671cd76379..c2278063234 100644
--- a/apps/docs/features/command/CommandMenu.tsx
+++ b/apps/docs/features/command/CommandMenu.tsx
@@ -1,10 +1,4 @@
-import {
-  Breadcrumb,
-  CommandHeader,
-  CommandInput,
-  CommandList,
-  CommandMenu,
-} from 'ui-patterns/CommandMenu'
+import { CommandHeader, CommandInput, CommandList, CommandMenu } from 'ui-patterns/CommandMenu'
 import { useChangelogCommand } from 'ui-patterns/CommandMenu/prepackaged/Changelog'
 import { useDocsAiCommands } from 'ui-patterns/CommandMenu/prepackaged/DocsAi'
 import { useDocsSearchCommands } from 'ui-patterns/CommandMenu/prepackaged/DocsSearch'
diff --git a/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
index ea7c045b9d8..205d8f1f6f8 100644
--- a/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
@@ -179,7 +179,7 @@ function CommandMenu({ children, trigger }: CommandMenuProps) {
         }}
         size={size}
         className={cn(
-          'relative flex flex-col my-0 mx-auto rounded-t-lg overflow-y-scroll',
+          'relative flex flex-col my-0 mx-auto rounded-t-lg overflow-hidden',
           'h-[85dvh] mt-[15vh] md:max-h-[500px] md:mt-0 left-0 bottom-0 md:bottom-auto',
           '!animate-in !slide-in-from-bottom-[85%] !duration-300',
           'data-[state=closed]:!animate-out data-[state=closed]:!slide-out-to-bottom',
diff --git a/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index 0088da15de1..08f67445f42 100644
--- a/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -88,7 +88,7 @@ const DocsAiPage = () => {
           />
         )}
       </CommandHeader>
-      <div className={cn('flex-grow min-h-0 overflow-auto p-4')}>
+      <div className={cn('flex-grow min-h-0 overflow-auto')}>
         {!hasError && messages.length > 0 && <AiMessages messages={messages} />}
         {!hasError && messages.length === 0 && <EmptyState handleSubmit={handleSubmit} />}
         {hasError && <ErrorState handleReset={handleReset} />}
@@ -270,12 +270,10 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
   const query = useQuery()
 
   return (
-    <CommandList_Shadcn_>
+    <CommandList_Shadcn_ className="max-h-[unset]">
       <CommandGroup_Shadcn_
         heading="Examples"
         className={cn(
-          // Double padding from command group primitive and container, remove the primitive one
-          '!p-0',
           'text-border-strong',
           '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5',
           '[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted'