dashboard kebab bug fix

app/src/components/Dashboard/DashboardCard.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect, act } from "react";
+import React, { useState, useRef } from "react";
+import { createPortal } from "react-dom";
 import img from "../../assets/image/image.png";
 import { useNavigate } from "react-router-dom";
 import { getUserData } from "../../functions/getUserData";
@@ -7,11 +8,11 @@ import {
   useProjectName,
   useSocketStore,
 } from "../../store/builder/store";
-import { viewProject } from "../../services/dashboard/viewProject";
 import OuterClick from "../../utils/outerClick";
 import { KebabIcon } from "../icons/ExportCommonIcons";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
-import { updateProject } from "../../services/dashboard/updateProject";
+// import { viewProject } from "../../services/dashboard/viewProject";
+// import { updateProject } from "../../services/dashboard/updateProject";
 
 interface DashBoardCardProps {
   projectName: string;
@@ -69,9 +70,9 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
   const kebabRef = useRef<HTMLDivElement>(null);
 
   const navigateToProject = async (e: any) => {
-    if (active && active == "trash") return;
+    if (active && active === "trash") return;
     try {
-      const viewProjects = await viewProject(organization, projectId, userId);
+      // const viewProjects = await viewProject(organization, projectId, userId);
 
       setLoadingProgress(1);
       setProjectName(projectName);
@@ -96,13 +97,13 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
       case "open in new tab":
         try {
           if (active === "shared" && createdBy) {
-            const newTab = await viewProject(
+            // const newTab = await viewProject(
-              organization,
+            //   organization,
-              projectId,
+            //   projectId,
-              createdBy?._id
+            //   createdBy?._id
-            );
+            // );
           } else {
-            const newTab = await viewProject(organization, projectId, userId);
+            // const newTab = await viewProject(organization, projectId, userId);
 
             setProjectName(projectName);
             setIsKebabOpen(false);
@@ -226,7 +227,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
       className="dashboard-card-container"
       onClick={navigateToProject}
       title={projectName}
-      onMouseLeave={() => setIsKebabOpen(false)}
+      // onMouseLeave={() => setIsKebabOpen(false)}
     >
       <div className="dashboard-card-wrapper">
         <div className="preview-container">
@@ -267,7 +268,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
             )}
             {createdAt && (
               <div className="project-data">
-                {active && active == "trash" ? `Trashed by you` : `Edited `}{" "}
+                {active && active === "trash" ? `Trashed by you` : `Edited `}{" "}
                 {getRelativeTime(createdAt)}
               </div>
             )}
@@ -292,22 +293,37 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
           </div>
         </div>
       </div>
-      {isKebabOpen && (
+      {isKebabOpen &&
-        <div className="kebab-options-wrapper">
+        createPortal(
-          {getOptions().map((option) => (
+          <div
-            <button
+            className="kebab-options-wrapper"
-              key={option}
+            style={{
-              className="option"
+              position: "fixed",
-              onClick={(e) => {
+              zIndex: 9999,
-                e.stopPropagation();
+              top: kebabRef.current
-                handleOptionClick(option);
+                ? kebabRef.current.getBoundingClientRect().bottom +
-              }}
+                  window.scrollY
-            >
+                : 0,
-              {option}
+              left: kebabRef.current
-            </button>
+                ? kebabRef.current.getBoundingClientRect().left + window.scrollX
-          ))}
+                : 0,
-        </div>
+            }}
-      )}
+          >
+            {getOptions().map((option) => (
+              <button
+                key={option}
+                className="option"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleOptionClick(option);
+                }}
+              >
+                {option}
+              </button>
+            ))}
+          </div>,
+          document.body
+        )}
     </button>
   );
 };

app/src/styles/pages/dashboard.scss

@@ -239,38 +239,6 @@
     }
   }
 
-  .kebab-options-wrapper {
-    position: absolute;
-    bottom: 40px;
-    right: 40px;
-    background: var(--background-color);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    z-index: 100;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(20px);
-    flex-direction: column;
-    transform: translate(100%, 100%);
-    overflow: hidden;
-    display: none;
-
-    .option {
-      padding: 8px 12px;
-      font-size: 14px;
-      text-align: left;
-      background: transparent;
-      border: none;
-      color: var(--text-color);
-      cursor: pointer;
-      transition: background 0.2s ease;
-      text-transform: capitalize;
-
-      &:hover {
-        background-color: var(--background-color-selected);
-      }
-    }
-  }
-
   &:hover {
     overflow: visible;
 
@@ -337,4 +305,37 @@
     font-family: #{$font-roboto};
     cursor: pointer;
   }
-}
+}
+
+.kebab-options-wrapper {
+  // position: absolute;
+  // bottom: 40px;
+  // right: 40px;
+  // z-index: 100;
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(20px);
+  flex-direction: column;
+  // transform: translate(100%, 100%);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: translate(0%, 0%);
+  .option {
+    padding: 8px 12px;
+    font-size: 14px;
+    text-align: left;
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background 0.2s ease;
+    text-transform: capitalize;
+
+    &:hover {
+      background-color: var(--background-color-selected);
+    }
+  }
+}