🧈 fix: Smoother Control Panel Tab Expansion Animations (#11077)

* 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

@@ -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">

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>

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>