refactor: standardize toolbar select item widths and improve alignment

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -167,6 +167,8 @@ export default function GenericNode({
 
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
 
+  const [openShowMoreOptions, setOpenShowMoreOptions] = useState(false);
+
   const renderOutputParameter = (
     output: OutputFieldType,
     idx: number,
@@ -232,6 +234,7 @@ export default function GenericNode({
           onCloseAdvancedModal={() => {}}
           updateNode={handleUpdateCode}
           isOutdated={isOutdated && isUserEdited}
+          setOpenShowMoreOptions={setOpenShowMoreOptions}
         />
       </NodeToolbar>
     );
@@ -335,6 +338,7 @@ export default function GenericNode({
             : `h-[4.065rem] w-48 rounded-[0.75rem] ${!selected ? "border-[1px] border-border ring-[0.5px] ring-border" : ""}`,
           "generic-node-div group/node relative",
           !hasOutputs && "pb-4",
+          openShowMoreOptions && "nowheel",
         )}
       >
         <div

src/frontend/src/components/ui/select-custom.tsx

@@ -74,7 +74,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -52,6 +52,7 @@ export default function NodeToolbarComponent({
   onCloseAdvancedModal,
   updateNode,
   isOutdated,
+  setOpenShowMoreOptions,
 }: nodeToolbarPropsType): JSX.Element {
   const version = useDarkStore((state) => state.version);
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
@@ -344,6 +345,10 @@ export default function NodeToolbarComponent({
     (selectTriggerRef.current! as HTMLElement)?.click();
   };
 
+  const handleOpenChange = (open: boolean) => {
+    setOpenShowMoreOptions && setOpenShowMoreOptions(open);
+  };
+
   const [toolMode, setToolMode] = useState(() => {
     // Check if tool mode is explicitly set on the node
     const hasToolModeProperty = data.node?.tool_mode;
@@ -380,6 +385,7 @@ export default function NodeToolbarComponent({
   }, [zoom]);
 
   if (scale === null) return <></>;
+
   return (
     <>
       <div
@@ -544,13 +550,22 @@ export default function NodeToolbarComponent({
           </ShadTooltip>
         </div>
 
-        <Select onValueChange={handleSelectChange} value={selectedValue!}>
-          <SelectTrigger ref={selectTriggerRef}>
+        <Select
+          onValueChange={handleSelectChange}
+          value={selectedValue!}
+          onOpenChange={handleOpenChange}
+          open
+        >
+          <SelectTrigger ref={selectTriggerRef} className="w-62">
             <></>
           </SelectTrigger>
           <SelectContent
-            className="relative min-w-[14rem] bg-background"
-            style={{ transform: `scale(${scale})`, transformOrigin: "top" }}
+            className={"relative top-1 w-56 bg-background"}
+            style={{
+              transform: `scale(${scale})`,
+              transformOrigin: "top",
+              left: scale === 1 ? "4.5rem" : `${1.7 * (scale - 1)}rem`,
+            }}
           >
             {hasCode && (
               <SelectItem value={"code"}>

src/frontend/src/types/components/index.ts

@@ -545,6 +545,7 @@ export type nodeToolbarPropsType = {
   isOutdated: boolean;
   updateNode: () => void;
   closeToolbar?: () => void;
+  setOpenShowMoreOptions?: (open: boolean) => void;
 };
 
 export type parsedDataType = {