From 7b889fe651daefcafd34e52f567d95ff01deab7b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 17 Jan 2024 17:27:05 -0300
Subject: [PATCH] Refactor sidebar draggable component

---
 .../sideBarDraggableComponent/index.tsx       | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index 455c488bc..f33e97a1d 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -1,10 +1,10 @@
-import { SelectTrigger } from "@radix-ui/react-select";
 import { DragEventHandler, forwardRef, useRef, useState } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
 import {
   Select,
   SelectContent,
   SelectItem,
+  SelectTrigger,
 } from "../../../../../components/ui/select-custom";
 import { useDarkStore } from "../../../../../stores/darkStore";
 import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
@@ -107,48 +107,51 @@ export const SidebarDraggableComponent = forwardRef(
               );
             }}
           >
-            <SelectTrigger className="w-full text-left">
-              <div
-                data-testid={sectionName + display_name}
-                id={sectionName + display_name}
-                className="side-bar-components-div-form"
-              >
-                <span className="side-bar-components-text">{display_name}</span>
-                <div ref={popoverRef}>
-                  <IconComponent
-                    name="Menu"
-                    className="side-bar-components-icon "
-                  />
-                  <SelectContent
-                    position="popper"
-                    side="bottom"
-                    sideOffset={-15}
-                    alignOffset={25}
-                  >
-                    <SelectItem value={"download"}>
+            <div
+              data-testid={sectionName + display_name}
+              id={sectionName + display_name}
+              className="side-bar-components-div-form"
+            >
+              <span className="side-bar-components-text">{display_name}</span>
+              <div ref={popoverRef}>
+                <IconComponent
+                  name="Menu"
+                  className="side-bar-components-icon "
+                />
+                <SelectTrigger></SelectTrigger>
+                <SelectContent
+                  position="popper"
+                  side="bottom"
+                  sideOffset={-25}
+                  style={{
+                    position: "absolute",
+                    left: cursorPos.x,
+                    top: cursorPos.y,
+                  }}
+                >
+                  <SelectItem value={"download"}>
+                    <div className="flex">
+                      <IconComponent
+                        name="Download"
+                        className="relative top-0.5 mr-2 h-4 w-4"
+                      />{" "}
+                      Download{" "}
+                    </div>{" "}
+                  </SelectItem>
+                  {!official && (
+                    <SelectItem value={"delete"}>
                       <div className="flex">
                         <IconComponent
-                          name="Download"
+                          name="Trash2"
                           className="relative top-0.5 mr-2 h-4 w-4"
                         />{" "}
-                        Download{" "}
+                        Delete{" "}
                       </div>{" "}
                     </SelectItem>
-                    {!official && (
-                      <SelectItem value={"delete"}>
-                        <div className="flex">
-                          <IconComponent
-                            name="Trash2"
-                            className="relative top-0.5 mr-2 h-4 w-4"
-                          />{" "}
-                          Delete{" "}
-                        </div>{" "}
-                      </SelectItem>
-                    )}
-                  </SelectContent>
-                </div>
+                  )}
+                </SelectContent>
               </div>
-            </SelectTrigger>
+            </div>
           </div>
         </div>
       </Select>