fix components panel layout

apps/designer/app/designer/features/sidebar-left/lib/header.tsx

@@ -11,7 +11,7 @@ export const BaseHeader = ({ title, actions }: BaseHeaderProps) => {
   return (
     <>
       <Flex
-        css={{ height: 40, paddingLeft: "$3" }}
+        css={{ height: 40, paddingLeft: "$3", flexShrink: 0 }}
         align="center"
         justify="between"
       >

apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx

@@ -132,7 +132,7 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
   });
 
   return (
-    <>
+    <Flex css={{ height: "100%", flexDirection: "column" }}>
       <Header
         title="Add"
         onClose={() => {
@@ -142,7 +142,7 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
       <Flex
         gap="1"
         wrap="wrap"
-        css={{ padding: "$1" }}
+        css={{ padding: "$1", overflow: "auto" }}
         ref={useDragHandlers.rootRef}
       >
         {componentNames.map((component: Instance["component"]) => (
@@ -160,7 +160,7 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
         ))}
         {dragComponent && <DragLayer component={dragComponent} point={point} />}
       </Flex>
-    </>
+    </Flex>
   );
 };
 

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -77,9 +77,6 @@ export const SidebarLeft = ({ publish, config }: SidebarLeftProps) => {
               dragAndDropState.isDragging && dragAndDropState.origin === "panel"
                 ? "hidden"
                 : "visible",
-
-            // @todo: is it ok to remove? (need to fix the "components" panel at min)
-            // overflow: "auto",
           }}
         >
           <TabContent