FIX: Pivot Columns Dropdown Empty on First Render in "More" Menu (#51)

* fix: resolve empty dropdown issue for Pivot columns in More menu

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>

* fix: use custom classes and memoize dropdownRender for More menu

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

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: tahierhussain

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;
+}

frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx

@@ -435,26 +435,29 @@ 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)),
     [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}>
@@ -472,7 +475,7 @@ const NoCodeToolbar = memo(function NoCodeToolbar({
           {hasOverflow && (
             <div className="toolbar-item toolbar-more-item">
               <Dropdown
-                menu={dropdownMenu}
+                dropdownRender={renderMoreDropdown}
                 trigger={["click"]}
                 placement="bottomRight"
                 overlayClassName="no-code-toolbar-dropdown"