Fixed bug of DOM nesting showing on console.log

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -14,7 +14,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 
@@ -52,13 +51,11 @@ export const MenuBar = ({ flows, tabId }) => {
       <div className="header-menu-bar">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button
+            <Button asChild variant="primary" size="sm">
-              className="header-menu-bar-display"
+              <div className="header-menu-bar-display">
-              variant="primary"
+                <div className="header-menu-flow-name">{current_flow.name}</div>
-              size="sm"
+                <ChevronDown className="h-4 w-4" />
-            >
+              </div>
-              <div className="header-menu-flow-name">{current_flow.name}</div>
-              <ChevronDown className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
@@ -99,7 +96,7 @@ export const MenuBar = ({ flows, tabId }) => {
               <Redo className="header-menu-options " />
               Redo
             </DropdownMenuItem>
-            <DropdownMenuSeparator />
+            {/* <DropdownMenuSeparator /> */}
             {/* <DropdownMenuLabel>Projects</DropdownMenuLabel> */}
             {/* <DropdownMenuRadioGroup className="max-h-full overflow-scroll"
               value={tabId}

src/frontend/src/index.css

@@ -545,7 +545,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
   }
   .header-menu-bar-display {
-    @apply flex max-w-[200px] items-center gap-2
+    @apply flex max-w-[200px] items-center gap-2 cursor-pointer
   }
   .header-menu-flow-name {
     @apply flex-1 truncate