remove items expanding when selecting menus

autogpt_platform/frontend/src/components/builder/block-menu/default/AllBlocksContent.tsx

@@ -67,17 +67,19 @@ const AllBlocksContent: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="w-full space-y-3 p-4">
-        {[0, 1, 3].map((categoryIndex) => (
-          <Fragment key={categoryIndex}>
-            {categoryIndex > 0 && (
-              <Skeleton className="my-4 h-[1px] w-full text-zinc-100" />
-            )}
-            {[0, 1, 2].map((blockIndex) => (
-              <Block.Skeleton key={`${categoryIndex}-${blockIndex}`} />
-            ))}
-          </Fragment>
-        ))}
+      <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
+        <div className="w-full px-4 pb-4">
+          {[0, 1, 3].map((categoryIndex) => (
+            <Fragment key={categoryIndex}>
+              {categoryIndex > 0 && (
+                <Skeleton className="my-4 h-[1px] w-full text-zinc-100" />
+              )}
+              {[0, 1, 2].map((blockIndex) => (
+                <Block.Skeleton key={`${categoryIndex}-${blockIndex}`} />
+              ))}
+            </Fragment>
+          ))}
+        </div>
       </div>
     );
   }

autogpt_platform/frontend/src/components/builder/block-menu/default/MarketplaceAgentsContent.tsx

@@ -19,10 +19,12 @@ const MarketplaceAgentsContent: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="w-full space-y-3 p-4">
-        {[0, 1, 2, 3, 4].map((index) => (
-          <MarketplaceAgentBlock.Skeleton key={index} />
-        ))}
+      <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
+        <div className="w-full px-4 pb-4">
+          {[0, 1, 2, 3, 4].map((index) => (
+            <MarketplaceAgentBlock.Skeleton key={index} />
+          ))}
+        </div>
       </div>
     );
   }

autogpt_platform/frontend/src/components/builder/block-menu/default/MyAgentsContent.tsx

@@ -19,10 +19,12 @@ const MyAgentsContent: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="w-full space-y-3 p-4">
-        {[0, 1, 2, 3, 4].map((index) => (
-          <UGCAgentBlock.Skeleton key={index} />
-        ))}
+      <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
+        <div className="w-full px-4 pb-4">
+          {[0, 1, 2, 3, 4].map((index) => (
+            <UGCAgentBlock.Skeleton key={index} />
+          ))}
+        </div>
       </div>
     );
   }

autogpt_platform/frontend/src/components/builder/block-menu/default/PaginatedBlocksContent.tsx

@@ -29,17 +29,19 @@ const PaginatedBlocksContent: React.FC<PaginatedBlocksContentProps> = ({
 
   if (loading) {
     return (
-      <div className="w-full space-y-3 p-4">
-        {[0, 1, 3].map((categoryIndex) => (
-          <Fragment key={categoryIndex}>
-            {categoryIndex > 0 && (
-              <div className="my-4 h-[1px] w-full bg-zinc-100" />
-            )}
-            {[0, 1, 2].map((blockIndex) => (
-              <Block.Skeleton key={`${categoryIndex}-${blockIndex}`} />
-            ))}
-          </Fragment>
-        ))}
+      <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
+        <div className="w-full px-4 pb-4">
+          {[0, 1, 3].map((categoryIndex) => (
+            <Fragment key={categoryIndex}>
+              {categoryIndex > 0 && (
+                <div className="my-4 h-[1px] w-full bg-zinc-100" />
+              )}
+              {[0, 1, 2].map((blockIndex) => (
+                <Block.Skeleton key={`${categoryIndex}-${blockIndex}`} />
+              ))}
+            </Fragment>
+          ))}
+        </div>
       </div>
     );
   }

autogpt_platform/frontend/src/components/builder/block-menu/default/PaginatedIntegrationList.tsx

@@ -21,10 +21,12 @@ const PaginatedIntegrationList: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="w-full space-y-3 p-4">
-        {[0, 1, 3].map((integrationIndex) => (
-          <Integration.Skeleton key={integrationIndex} />
-        ))}
+      <div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
+        <div className="w-full px-4 pb-4">
+          {[0, 1, 3].map((integrationIndex) => (
+            <Integration.Skeleton key={integrationIndex} />
+          ))}
+        </div>
       </div>
     );
   }