From d0863de8d4373e60c1d6e514beda41b1fc52ec42 Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Thu, 25 Dec 2025 09:25:25 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=88=20fix:=20Smoother=20Control=20Pane?=
 =?UTF-8?q?l=20Tab=20Expansion=20Animations=20(#11077)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: add opacity transitions for expansion / collapse of control panel tabs so they dont overlap anymore

* fix: make sure Agent Builder panel animates nicely
---
 client/src/components/SidePanel/Agents/AgentPanel.tsx | 2 +-
 client/src/components/SidePanel/Nav.tsx               | 2 +-
 packages/client/src/components/Accordion.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
index f167a35521..2cf6af3f7d 100644
--- a/client/src/components/SidePanel/Agents/AgentPanel.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -476,7 +476,7 @@ export default function AgentPanel() {
     <FormProvider {...methods}>
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-visible"
+        className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-y-hidden overflow-x-visible"
         aria-label="Agent configuration form"
       >
         <div className="mx-1 mt-2 flex w-full flex-wrap gap-2">
diff --git a/client/src/components/SidePanel/Nav.tsx b/client/src/components/SidePanel/Nav.tsx
index b4319b4a0e..993ce95172 100644
--- a/client/src/components/SidePanel/Nav.tsx
+++ b/client/src/components/SidePanel/Nav.tsx
@@ -90,7 +90,7 @@ function NavContent({ links, isCollapsed, resize }: Omit<NavProps, 'defaultActiv
                           </AccordionPrimitive.Trigger>
                         </AccordionPrimitive.Header>
 
-                        <AccordionContent className="w-full text-text-primary">
+                        <AccordionContent className="bg-token-sidebar-surface-primary w-full text-text-primary">
                           {link.Component && <link.Component />}
                         </AccordionContent>
                       </AccordionItem>
diff --git a/packages/client/src/components/Accordion.tsx b/packages/client/src/components/Accordion.tsx
index 87d6970038..813cf4fa02 100644
--- a/packages/client/src/components/Accordion.tsx
+++ b/packages/client/src/components/Accordion.tsx
@@ -39,7 +39,7 @@ const AccordionContent = React.forwardRef<
 >(({ className = '', children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-x-visible text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-y-hidden overflow-x-visible text-sm transition-opacity data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>