fix nodemenu overflow height, fix width pop-in

nodetool-ai · Jan 13, 2025 · e0b05a4 · e0b05a4
1 parent 41535a0
commit e0b05a4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/web/src/components/node_menu/NamespaceList.tsx b/web/src/components/node_menu/NamespaceList.tsx
@@ -69,7 +69,8 @@ const namespaceStyles = (theme: any, inPanel: boolean) =>
       overflowY: "auto",
       width: "fit-content",
       height: "fit-content",
-      maxHeight: inPanel ? "85vh" : "680px",
+      maxHeight: inPanel ? "85vh" : "calc(min(750px, 50vh))",
+
       paddingRight: inPanel ? ".5em" : "1em",
       paddingBottom: "3em",
       marginRight: ".5em",
@@ -108,16 +109,33 @@ const namespaceStyles = (theme: any, inPanel: boolean) =>
       overflowY: "auto"
     },
     ".no-selection": {
-      maxWidth: "400px",
-      display: "flex",
+      maxWidth: "200px",
       flexDirection: "column",
       color: theme.palette.c_white,
       fontFamily: theme.fontFamily1,
       wordSpacing: "0",
       padding: "0 1em",
       margin: 0,
       alignItems: "stretch",
-      gap: "1em"
+      gap: "1em",
+      opacity: 0,
+      animation: "fadeIn 0.4s ease-in forwards",
+      animationDelay: ".5s",
+      display: "hidden",
+      overflow: "hidden",
+      textWrap: "nowrap"
+    },
+    "@keyframes fadeIn": {
+      from: {
+        display: "flex",
+        maxWidth: "400px",
+        opacity: 0
+      },
+      to: {
+        display: "flex",
+        maxWidth: "400px",
+        opacity: 1
+      }
     },
     ".explanation": {
       overflowY: "scroll",
@@ -181,6 +199,7 @@ const namespaceStyles = (theme: any, inPanel: boolean) =>
     ".nodes": {
       display: "flex",
       flexDirection: "column",
+      minWidth: "200px",
       backgroundColor: "transparent"
     },
     ".node": {

diff --git a/web/src/stores/NodeMenuStore.ts b/web/src/stores/NodeMenuStore.ts
@@ -403,7 +403,7 @@ const useNodeMenuStore = create<NodeMenuStore>((set, get) => {
     },
     menuPosition: { x: 0, y: 0 },
     menuWidth: 900,
-    menuHeight: 800,
+    menuHeight: 750,
     setMenuPosition: (x, y) => {
       set({
         menuPosition: { x, y }
@@ -619,8 +619,8 @@ const useNodeMenuStore = create<NodeMenuStore>((set, get) => {
     clickPosition: { x: 0, y: 0 },
 
     openNodeMenu: (
-      x,
-      y,
+      x: number,
+      y: number,
       openedByDrop: boolean = false,
       dropType: string = "",
       connectDirection: ConnectDirection = null,
@@ -638,9 +638,12 @@ const useNodeMenuStore = create<NodeMenuStore>((set, get) => {
       // Constrain x position to keep menu within window bounds
       const constrainedX = Math.min(Math.max(x, 0), maxPosX);
 
-      // Position the menu below the click point, with some offset
+      // Ensure minimum Y position (add some padding from top)
+      const minPosY = 80; // Minimum distance from top of window
       const menuOffset = 20; // Add some space between click point and menu
-      const constrainedY = Math.min(y + menuOffset, maxPosY);
+
+      // Constrain Y position between minimum and maximum bounds
+      const constrainedY = Math.min(Math.max(y + menuOffset, minPosY), maxPosY);
 
       set({
         isMenuOpen: true,