Fix double scroll container in agent flow builder (#4933)

* fix double scroll container in agent flow builder

* use overflow-clip to prevent focus events from scrolling outer container

* add bottom padding

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>

frontend/src/pages/Admin/AgentBuilder/AddBlockMenu/index.jsx

@@ -40,7 +40,7 @@ export default function AddBlockMenu({
 
   if (checkIfCanAddBlock(blocks) === false) return null;
   return (
-    <div className="relative mt-4 w-[280px] mx-auto pb-[50%]" ref={menuRef}>
+    <div className="relative mt-4 w-[280px] mx-auto pb-4" ref={menuRef}>
       <button
         onClick={() => setShowBlockMenu(!showBlockMenu)}
         className="transition-all duration-300 w-full p-2.5 bg-theme-action-menu-bg hover:bg-theme-action-menu-item-hover border border-white/10 rounded-lg text-white flex items-center justify-center gap-2 text-sm font-medium"

frontend/src/pages/Admin/AgentBuilder/index.jsx

@@ -338,7 +338,7 @@ export default function AgentBuilder() {
         backgroundSize: "15px 15px",
         backgroundPosition: "-7.5px -7.5px",
       }}
-      className="w-full h-screen flex bg-theme-bg-primary"
+      className="relative w-screen h-screen flex flex-col bg-theme-bg-primary overflow-clip"
     >
       <PublishEntityModal
         show={showPublishModal}
@@ -346,34 +346,34 @@ export default function AgentBuilder() {
         entityType="agent-flow"
         entity={flowEntity}
       />
-      <div className="w-full flex flex-col">
-        <HeaderMenu
-          agentName={agentName}
-          availableFlows={availableFlows}
-          onNewFlow={clearFlow}
-          onSaveFlow={saveFlow}
-          onPublishFlow={handlePublishFlow}
-        />
-        <div className="flex-1 p-6 overflow-y-auto">
-          <div className="max-w-xl mx-auto mt-14">
-            <BlockList
-              blocks={blocks}
-              updateBlockConfig={updateBlockConfig}
-              removeBlock={removeBlock}
-              toggleBlockExpansion={toggleBlockExpansion}
-              renderVariableSelect={renderVariableSelect}
-              onDeleteVariable={deleteVariable}
-              moveBlock={moveBlock}
-              refs={{ nameRef, descriptionRef }}
-            />
+      <HeaderMenu
+        agentName={agentName}
+        availableFlows={availableFlows}
+        onNewFlow={clearFlow}
+        onSaveFlow={saveFlow}
+        onPublishFlow={handlePublishFlow}
+      />
+      <div className="flex-1 min-h-0 p-6 overflow-y-auto">
+        <div
+          className={`max-w-xl mx-auto mt-14 ${showBlockMenu ? "pb-52" : ""}`}
+        >
+          <BlockList
+            blocks={blocks}
+            updateBlockConfig={updateBlockConfig}
+            removeBlock={removeBlock}
+            toggleBlockExpansion={toggleBlockExpansion}
+            renderVariableSelect={renderVariableSelect}
+            onDeleteVariable={deleteVariable}
+            moveBlock={moveBlock}
+            refs={{ nameRef, descriptionRef }}
+          />
 
-            <AddBlockMenu
-              blocks={blocks}
-              showBlockMenu={showBlockMenu}
-              setShowBlockMenu={setShowBlockMenu}
-              addBlock={addBlock}
-            />
-          </div>
+          <AddBlockMenu
+            blocks={blocks}
+            showBlockMenu={showBlockMenu}
+            setShowBlockMenu={setShowBlockMenu}
+            addBlock={addBlock}
+          />
         </div>
       </div>
       <Tooltip