From 9f869a3855fd6669dcfd94ef1c99a21cf6c922f7 Mon Sep 17 00:00:00 2001
From: Tahier Hussain <tahier@zipstack.com>
Date: Thu, 9 Apr 2026 04:36:02 +0530
Subject: [PATCH 1/2] fix: resolve empty dropdown issue for Pivot columns in
 More menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the Pivot toolbar item was displayed inside the "More" dropdown (due to toolbar overflow), the columns dropdown appeared empty on first render. This occurred because the memoized dropdownMenu was capturing stale JSX snapshots of components.

Changed from using Ant Design's menu prop to dropdownRender to ensure components are rendered fresh with current state on each dropdown open, rather than relying on cached React element references.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../no-code-toolbar/no-code-toolbar.jsx       | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
index 3f095e24..d3738715 100644
--- a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
+++ b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
@@ -435,20 +435,6 @@ const NoCodeToolbar = memo(function NoCodeToolbar({
     };
   }, [items, calculateVisibleItems, debouncedCalculate]);
 
-  // Create dropdown menu items from hidden items
-  const dropdownMenu = useMemo(
-    () => ({
-      items: hiddenItems.map((item) => {
-        const freshItem = items.find((i) => i.key === item.key);
-        return {
-          key: item.key,
-          label: freshItem?.label ?? item.label,
-        };
-      }),
-    }),
-    [hiddenItems, items]
-  );
-
   // Create a set of hidden item keys for quick lookup
   const hiddenItemKeys = useMemo(
     () => new Set(hiddenItems.map((item) => item.key)),
@@ -472,7 +458,18 @@ const NoCodeToolbar = memo(function NoCodeToolbar({
           {hasOverflow && (
             <div className="toolbar-item toolbar-more-item">
               <Dropdown
-                menu={dropdownMenu}
+                dropdownRender={() => (
+                  <div className="ant-dropdown-menu">
+                    {hiddenItems.map((item) => {
+                      const freshItem = items.find((i) => i.key === item.key);
+                      return (
+                        <div key={item.key} className="ant-dropdown-menu-item">
+                          {freshItem?.label ?? item.label}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
                 trigger={["click"]}
                 placement="bottomRight"
                 overlayClassName="no-code-toolbar-dropdown"

From a8867406a9a62d2ca2303afd42bcf0e9e1fe5ed5 Mon Sep 17 00:00:00 2001
From: Tahier Hussain <tahier@zipstack.com>
Date: Thu, 9 Apr 2026 04:56:05 +0530
Subject: [PATCH 2/2] fix: use custom classes and memoize dropdownRender for
 More menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace internal Ant Design class names with custom classes
  (no-code-toolbar-more-menu, no-code-toolbar-more-item)
- Memoize dropdownRender with useCallback to avoid unnecessary re-renders
- Add CSS styles for the custom dropdown classes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../no-code-toolbar/no-code-toolbar.css       | 15 ++++++++++
 .../no-code-toolbar/no-code-toolbar.jsx       | 30 +++++++++++--------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
index 9b0246ef..90f0f054 100644
--- a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
+++ b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
@@ -119,3 +119,18 @@
   min-width: 16px;
   height: 16px;
 }
+
+/* Custom dropdown menu for "More" button */
+.no-code-toolbar-more-menu {
+  max-height: 400px;
+  overflow-y: auto;
+  background-color: var(--modal-bg);
+  border: 1px solid var(--border-color-3);
+  border-radius: 8px;
+  padding: 4px 0;
+}
+
+.no-code-toolbar-more-item {
+  padding: 0;
+  margin: 0;
+}
diff --git a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
index d3738715..83943fc8 100644
--- a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
+++ b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
@@ -441,6 +441,23 @@ const NoCodeToolbar = memo(function NoCodeToolbar({
     [hiddenItems]
   );
 
+  // Render function for the "More" dropdown - memoized to avoid unnecessary re-renders
+  const renderMoreDropdown = useCallback(
+    () => (
+      <div className="no-code-toolbar-more-menu">
+        {hiddenItems.map((item) => {
+          const freshItem = items.find((i) => i.key === item.key);
+          return (
+            <div key={item.key} className="no-code-toolbar-more-item">
+              {freshItem?.label ?? item.label}
+            </div>
+          );
+        })}
+      </div>
+    ),
+    [hiddenItems, items]
+  );
+
   return (
     <div className="no-code-toolbar-wrapper">
       <div className="no-code-toolbar-content" ref={containerRef}>
@@ -458,18 +475,7 @@ const NoCodeToolbar = memo(function NoCodeToolbar({
           {hasOverflow && (
             <div className="toolbar-item toolbar-more-item">
               <Dropdown
-                dropdownRender={() => (
-                  <div className="ant-dropdown-menu">
-                    {hiddenItems.map((item) => {
-                      const freshItem = items.find((i) => i.key === item.key);
-                      return (
-                        <div key={item.key} className="ant-dropdown-menu-item">
-                          {freshItem?.label ?? item.label}
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
+                dropdownRender={renderMoreDropdown}
                 trigger={["click"]}
                 placement="bottomRight"
                 overlayClassName="no-code-toolbar-dropdown"