From 5f125e03b911845eed5bdb8fc3b53a07637dc07b Mon Sep 17 00:00:00 2001
From: Yasir761 <myasiransari16@gmail.com>
Date: Mon, 20 Oct 2025 18:38:24 +0530
Subject: [PATCH 1/5] make the deployment card as collapsible

---
 .../ProjectDeploymentListItem.tsx             | 95 +++++++++++--------
 1 file changed, 53 insertions(+), 42 deletions(-)

diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
index b1d5c8d7130..8d04f737198 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
@@ -18,7 +18,7 @@ import {ProjectDeploymentTagKeys} from '@/shared/queries/automation/projectDeplo
 import {ProjectDeploymentKeys} from '@/shared/queries/automation/projectDeployments.queries';
 import {useQueryClient} from '@tanstack/react-query';
 import {ChevronDownIcon} from 'lucide-react';
-import {useState} from 'react';
+import {useState,useRef, useCallback} from 'react';
 
 import TagList from '../../../../../shared/components/TagList';
 import ProjectDeploymentDialog from '../project-deployment-dialog/ProjectDeploymentDialog';
@@ -38,47 +38,32 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
     );
 
     const {captureProjectDeploymentEnabled} = useAnalytics();
-
     const queryClient = useQueryClient();
 
     const deleteProjectDeploymentMutation = useDeleteProjectDeploymentMutation({
         onSuccess: () => {
-            queryClient.invalidateQueries({
-                queryKey: ProjectDeploymentKeys.projectDeployments,
-            });
-            queryClient.invalidateQueries({
-                queryKey: ProjectDeploymentTagKeys.projectDeploymentTags,
-            });
+            queryClient.invalidateQueries({ queryKey: ProjectDeploymentKeys.projectDeployments });
+            queryClient.invalidateQueries({ queryKey: ProjectDeploymentTagKeys.projectDeploymentTags });
         },
     });
 
     const updateProjectDeploymentTagsMutation = useUpdateProjectDeploymentTagsMutation({
         onSuccess: () => {
-            queryClient.invalidateQueries({
-                queryKey: ProjectDeploymentKeys.projectDeployments,
-            });
-            queryClient.invalidateQueries({
-                queryKey: ProjectDeploymentTagKeys.projectDeploymentTags,
-            });
+            queryClient.invalidateQueries({ queryKey: ProjectDeploymentKeys.projectDeployments });
+            queryClient.invalidateQueries({ queryKey: ProjectDeploymentTagKeys.projectDeploymentTags });
         },
     });
 
     const enableProjectDeploymentMutation = useEnableProjectDeploymentMutation({
         onSuccess: () => {
             captureProjectDeploymentEnabled();
-
-            queryClient.invalidateQueries({
-                queryKey: ProjectDeploymentKeys.projectDeployments,
-            });
+            queryClient.invalidateQueries({ queryKey: ProjectDeploymentKeys.projectDeployments });
         },
     });
 
     const handleOnCheckedChange = (value: boolean) => {
         enableProjectDeploymentMutation.mutate(
-            {
-                enable: value,
-                id: projectDeployment.id!,
-            },
+            { enable: value, id: projectDeployment.id! },
             {
                 onSuccess: () => {
                     setProjectDeploymentEnabled(projectDeployment.id!, !projectDeployment.enabled);
@@ -88,9 +73,35 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
         );
     };
 
+    // New: Ref to CollapsibleTrigger
+    const workflowsCollapsibleTriggerRef = useRef<HTMLButtonElement | null>(null);
+
+    const handleCardClick = useCallback((event: React.MouseEvent) => {
+        const target = event.target as HTMLElement;
+
+        // Prevent opening workflow when clicking interactive elements
+        const interactiveSelectors = [
+            '[data-interactive]',
+            '.dropdown-menu-item',
+            '[data-radix-dropdown-menu-item]',
+            '[data-radix-dropdown-menu-trigger]',
+            '[data-radix-collapsible-trigger]',
+            'button',
+            'input',
+            'svg',
+        ].join(', ');
+
+        if (target.closest(interactiveSelectors)) return;
+
+        workflowsCollapsibleTriggerRef.current?.click();
+    }, []);
+
     return (
         <>
-            <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
+            <div
+                className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50 cursor-pointer"
+                onClick={handleCardClick} // <-- make whole card clickable
+            >
                 <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
@@ -100,7 +111,6 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                         <TooltipTrigger>
                                             <span className="text-base font-semibold">{projectDeployment.name}</span>
                                         </TooltipTrigger>
-
                                         <TooltipContent>{projectDeployment.description}</TooltipContent>
                                     </Tooltip>
                                 ) : (
@@ -111,24 +121,24 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
 
                         <div className="mt-2 sm:flex sm:items-center sm:justify-between">
                             <div className="flex items-center">
-                                <CollapsibleTrigger className="group mr-4 flex text-xs font-semibold text-muted-foreground">
+                                <CollapsibleTrigger
+                                    ref={workflowsCollapsibleTriggerRef} // <-- ref here
+                                    className="group mr-4 flex text-xs font-semibold text-muted-foreground"
+                                >
                                     <span className="mr-1">
                                         {projectDeployment.projectDeploymentWorkflows?.length === 1
                                             ? `1 workflow`
                                             : `${projectDeployment.projectDeploymentWorkflows?.length} workflows`}
                                     </span>
-
                                     <ChevronDownIcon className="size-4 duration-300 group-data-[state=open]:rotate-180" />
                                 </CollapsibleTrigger>
 
-                                <div onClick={(event) => event.preventDefault()}>
+                                <div onClick={(event) => event.stopPropagation()}>
                                     {projectDeployment.tags && (
                                         <TagList
                                             getRequest={(id, tags) => ({
                                                 id: id!,
-                                                updateTagsRequest: {
-                                                    tags: tags || [],
-                                                },
+                                                updateTagsRequest: { tags: tags || [] },
                                             })}
                                             id={projectDeployment.id!}
                                             remainingTags={remainingTags}
@@ -146,7 +156,6 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                             <TooltipTrigger asChild>
                                 <Badge variant="secondary">V{projectDeployment.projectVersion}</Badge>
                             </TooltipTrigger>
-
                             <TooltipContent>The project version</TooltipContent>
                         </Tooltip>
 
@@ -155,7 +164,6 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                 <TooltipTrigger asChild>
                                     <EnvironmentBadge environmentId={projectDeployment.environmentId!} />
                                 </TooltipTrigger>
-
                                 <TooltipContent>The environment</TooltipContent>
                             </Tooltip>
                         </div>
@@ -163,11 +171,11 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <div className="flex items-center">
                                 {enableProjectDeploymentMutation.isPending && <LoadingIcon />}
-
                                 <Switch
                                     checked={projectDeployment.enabled}
                                     disabled={enableProjectDeploymentMutation.isPending}
                                     onCheckedChange={handleOnCheckedChange}
+                                    onClick={(e) => e.stopPropagation()} // preserve switch
                                 />
                             </div>
 
@@ -181,16 +189,21 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                         <span className="text-xs">No executions</span>
                                     )}
                                 </TooltipTrigger>
-
                                 <TooltipContent>Last Execution Date</TooltipContent>
                             </Tooltip>
                         </div>
 
-                        <ProjectDeploymentListItemDropdownMenu
-                            onDeleteClick={() => setShowDeleteDialog(true)}
-                            onEditClick={() => setShowEditDialog(true)}
-                            onUpdateProjectVersionClick={() => setShowUpdateProjectVersionDialog(true)}
-                        />
+                      <ProjectDeploymentListItemDropdownMenu
+    onDeleteClick={() => {
+        setShowDeleteDialog(true);
+    }}
+    onEditClick={() => {
+        setShowEditDialog(true);
+    }}
+    onUpdateProjectVersionClick={() => {
+        setShowUpdateProjectVersionDialog(true);
+    }}
+/>
                     </div>
                 </div>
             </div>
@@ -200,9 +213,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                     isPending={deleteProjectDeploymentMutation.isPending}
                     onCancelClick={() => setShowDeleteDialog(false)}
                     onDeleteClick={() => {
-                        if (projectDeployment.id) {
-                            deleteProjectDeploymentMutation.mutate(projectDeployment.id);
-                        }
+                        if (projectDeployment.id) deleteProjectDeploymentMutation.mutate(projectDeployment.id);
                     }}
                 />
             )}

From c4ae3df9dcc0bc7e248dec32daf1425a30895253 Mon Sep 17 00:00:00 2001
From: Yasir761 <myasiransari16@gmail.com>
Date: Tue, 21 Oct 2025 19:32:36 +0530
Subject: [PATCH 2/5] Make deployment card clickable; run format & typecheck

---
 .../ProjectDeploymentListItem.tsx             | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
index 8d04f737198..74c549d0f27 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
@@ -18,7 +18,7 @@ import {ProjectDeploymentTagKeys} from '@/shared/queries/automation/projectDeplo
 import {ProjectDeploymentKeys} from '@/shared/queries/automation/projectDeployments.queries';
 import {useQueryClient} from '@tanstack/react-query';
 import {ChevronDownIcon} from 'lucide-react';
-import {useState,useRef, useCallback} from 'react';
+import {useCallback, useRef, useState} from 'react';
 
 import TagList from '../../../../../shared/components/TagList';
 import ProjectDeploymentDialog from '../project-deployment-dialog/ProjectDeploymentDialog';
@@ -42,28 +42,28 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
 
     const deleteProjectDeploymentMutation = useDeleteProjectDeploymentMutation({
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: ProjectDeploymentKeys.projectDeployments });
-            queryClient.invalidateQueries({ queryKey: ProjectDeploymentTagKeys.projectDeploymentTags });
+            queryClient.invalidateQueries({queryKey: ProjectDeploymentKeys.projectDeployments});
+            queryClient.invalidateQueries({queryKey: ProjectDeploymentTagKeys.projectDeploymentTags});
         },
     });
 
     const updateProjectDeploymentTagsMutation = useUpdateProjectDeploymentTagsMutation({
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: ProjectDeploymentKeys.projectDeployments });
-            queryClient.invalidateQueries({ queryKey: ProjectDeploymentTagKeys.projectDeploymentTags });
+            queryClient.invalidateQueries({queryKey: ProjectDeploymentKeys.projectDeployments});
+            queryClient.invalidateQueries({queryKey: ProjectDeploymentTagKeys.projectDeploymentTags});
         },
     });
 
     const enableProjectDeploymentMutation = useEnableProjectDeploymentMutation({
         onSuccess: () => {
             captureProjectDeploymentEnabled();
-            queryClient.invalidateQueries({ queryKey: ProjectDeploymentKeys.projectDeployments });
+            queryClient.invalidateQueries({queryKey: ProjectDeploymentKeys.projectDeployments});
         },
     });
 
     const handleOnCheckedChange = (value: boolean) => {
         enableProjectDeploymentMutation.mutate(
-            { enable: value, id: projectDeployment.id! },
+            {enable: value, id: projectDeployment.id!},
             {
                 onSuccess: () => {
                     setProjectDeploymentEnabled(projectDeployment.id!, !projectDeployment.enabled);
@@ -73,13 +73,11 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
         );
     };
 
-    // New: Ref to CollapsibleTrigger
     const workflowsCollapsibleTriggerRef = useRef<HTMLButtonElement | null>(null);
 
     const handleCardClick = useCallback((event: React.MouseEvent) => {
         const target = event.target as HTMLElement;
 
-        // Prevent opening workflow when clicking interactive elements
         const interactiveSelectors = [
             '[data-interactive]',
             '.dropdown-menu-item',
@@ -99,8 +97,8 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
     return (
         <>
             <div
-                className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50 cursor-pointer"
-                onClick={handleCardClick} // <-- make whole card clickable
+                className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 hover:bg-gray-50"
+                onClick={handleCardClick}
             >
                 <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
@@ -111,6 +109,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                         <TooltipTrigger>
                                             <span className="text-base font-semibold">{projectDeployment.name}</span>
                                         </TooltipTrigger>
+
                                         <TooltipContent>{projectDeployment.description}</TooltipContent>
                                     </Tooltip>
                                 ) : (
@@ -122,14 +121,15 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                         <div className="mt-2 sm:flex sm:items-center sm:justify-between">
                             <div className="flex items-center">
                                 <CollapsibleTrigger
-                                    ref={workflowsCollapsibleTriggerRef} // <-- ref here
                                     className="group mr-4 flex text-xs font-semibold text-muted-foreground"
+                                    ref={workflowsCollapsibleTriggerRef} // <-- ref here
                                 >
                                     <span className="mr-1">
                                         {projectDeployment.projectDeploymentWorkflows?.length === 1
                                             ? `1 workflow`
                                             : `${projectDeployment.projectDeploymentWorkflows?.length} workflows`}
                                     </span>
+
                                     <ChevronDownIcon className="size-4 duration-300 group-data-[state=open]:rotate-180" />
                                 </CollapsibleTrigger>
 
@@ -138,7 +138,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                         <TagList
                                             getRequest={(id, tags) => ({
                                                 id: id!,
-                                                updateTagsRequest: { tags: tags || [] },
+                                                updateTagsRequest: {tags: tags || []},
                                             })}
                                             id={projectDeployment.id!}
                                             remainingTags={remainingTags}
@@ -156,6 +156,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                             <TooltipTrigger asChild>
                                 <Badge variant="secondary">V{projectDeployment.projectVersion}</Badge>
                             </TooltipTrigger>
+
                             <TooltipContent>The project version</TooltipContent>
                         </Tooltip>
 
@@ -164,6 +165,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                 <TooltipTrigger asChild>
                                     <EnvironmentBadge environmentId={projectDeployment.environmentId!} />
                                 </TooltipTrigger>
+
                                 <TooltipContent>The environment</TooltipContent>
                             </Tooltip>
                         </div>
@@ -171,11 +173,12 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <div className="flex items-center">
                                 {enableProjectDeploymentMutation.isPending && <LoadingIcon />}
+
                                 <Switch
                                     checked={projectDeployment.enabled}
                                     disabled={enableProjectDeploymentMutation.isPending}
                                     onCheckedChange={handleOnCheckedChange}
-                                    onClick={(e) => e.stopPropagation()} // preserve switch
+                                    onClick={(event) => event.stopPropagation()}
                                 />
                             </div>
 
@@ -189,21 +192,16 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                                         <span className="text-xs">No executions</span>
                                     )}
                                 </TooltipTrigger>
+
                                 <TooltipContent>Last Execution Date</TooltipContent>
                             </Tooltip>
                         </div>
 
-                      <ProjectDeploymentListItemDropdownMenu
-    onDeleteClick={() => {
-        setShowDeleteDialog(true);
-    }}
-    onEditClick={() => {
-        setShowEditDialog(true);
-    }}
-    onUpdateProjectVersionClick={() => {
-        setShowUpdateProjectVersionDialog(true);
-    }}
-/>
+                        <ProjectDeploymentListItemDropdownMenu
+                            onDeleteClick={() => setShowDeleteDialog(true)}
+                            onEditClick={() => setShowEditDialog(true)}
+                            onUpdateProjectVersionClick={() => setShowUpdateProjectVersionDialog(true)}
+                        />
                     </div>
                 </div>
             </div>
@@ -213,7 +211,9 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                     isPending={deleteProjectDeploymentMutation.isPending}
                     onCancelClick={() => setShowDeleteDialog(false)}
                     onDeleteClick={() => {
-                        if (projectDeployment.id) deleteProjectDeploymentMutation.mutate(projectDeployment.id);
+                        if (projectDeployment.id) {
+                            deleteProjectDeploymentMutation.mutate(projectDeployment.id);
+                        }
                     }}
                 />
             )}

From 9366a862dc14bc9ae268699c476a3fdb06efdb1c Mon Sep 17 00:00:00 2001
From: Yasir761 <myasiransari16@gmail.com>
Date: Wed, 22 Oct 2025 19:10:06 +0530
Subject: [PATCH 3/5] make the all changes as suggested

---
 .../project-deployment-list/ProjectDeploymentListItem.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
index 74c549d0f27..58a83ae333b 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
@@ -89,7 +89,9 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
             'svg',
         ].join(', ');
 
-        if (target.closest(interactiveSelectors)) return;
+        if (target.closest(interactiveSelectors)) {
+            return;
+        }
 
         workflowsCollapsibleTriggerRef.current?.click();
     }, []);
@@ -122,7 +124,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                             <div className="flex items-center">
                                 <CollapsibleTrigger
                                     className="group mr-4 flex text-xs font-semibold text-muted-foreground"
-                                    ref={workflowsCollapsibleTriggerRef} // <-- ref here
+                                    ref={workflowsCollapsibleTriggerRef}
                                 >
                                     <span className="mr-1">
                                         {projectDeployment.projectDeploymentWorkflows?.length === 1

From 550de63ec74cc9794669ecb44232441ee6a7a734 Mon Sep 17 00:00:00 2001
From: Yasir761 <myasiransari16@gmail.com>
Date: Thu, 23 Oct 2025 20:03:48 +0530
Subject: [PATCH 4/5] make dropdown inactive

---
 .../project-deployment-list/ProjectDeploymentListItem.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
index 58a83ae333b..b4808349360 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
@@ -89,7 +89,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
             'svg',
         ].join(', ');
 
-        if (target.closest(interactiveSelectors)) {
+        if (target.closest('[data-stop-propagation]')) {
             return;
         }
 

From 7bb69eeacdb641dfeefd79c2753d85de8236ac81 Mon Sep 17 00:00:00 2001
From: Yasir761 <myasiransari16@gmail.com>
Date: Sat, 1 Nov 2025 22:18:31 +0530
Subject: [PATCH 5/5] Fix: prevent dropdown click from opening card

---
 .../ProjectDeploymentListItem.tsx                      | 10 +++++++---
 .../ProjectDeploymentListItemDropdownMenu.tsx          |  8 ++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
index b4808349360..a51cff5e22b 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
@@ -10,6 +10,7 @@ import EnvironmentBadge from '@/shared/components/EnvironmentBadge';
 import {useAnalytics} from '@/shared/hooks/useAnalytics';
 import {ProjectDeployment, Tag} from '@/shared/middleware/automation/configuration';
 import {useUpdateProjectDeploymentTagsMutation} from '@/shared/mutations/automation/projectDeploymentTags.mutations';
+
 import {
     useDeleteProjectDeploymentMutation,
     useEnableProjectDeploymentMutation,
@@ -89,7 +90,10 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
             'svg',
         ].join(', ');
 
-        if (target.closest('[data-stop-propagation]')) {
+        if (target.closest(interactiveSelectors)) {
+            return;
+        }
+        if (workflowsCollapsibleTriggerRef.current?.contains(target)) {
             return;
         }
 
@@ -99,8 +103,8 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
     return (
         <>
             <div
-                className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 hover:bg-gray-50"
-                onClick={handleCardClick}
+                className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 hover:bg-destructive-foreground"
+                onClick={(event) => handleCardClick(event)}
             >
                 <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItemDropdownMenu.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItemDropdownMenu.tsx
index c1fcc3a056d..28ed0606e9b 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItemDropdownMenu.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItemDropdownMenu.tsx
@@ -22,19 +22,19 @@ const ProjectDeploymentListItemDropdownMenu = ({
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button size="icon" variant="ghost">
+                <Button size="icon" variant="ghost" >
                     <EllipsisVerticalIcon className="size-4 hover:cursor-pointer" />
                 </Button>
             </DropdownMenuTrigger>
 
             <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={onEditClick}>Edit</DropdownMenuItem>
+                <DropdownMenuItem className="dropdown-menu-item" onClick={onEditClick}>Edit</DropdownMenuItem>
 
-                <DropdownMenuItem onClick={onUpdateProjectVersionClick}>Update Project Version</DropdownMenuItem>
+                <DropdownMenuItem className="dropdown-menu-item" onClick={onUpdateProjectVersionClick}>Update Project Version</DropdownMenuItem>
 
                 <DropdownMenuSeparator />
 
-                <DropdownMenuItem className="text-destructive" onClick={onDeleteClick}>
+                <DropdownMenuItem className="text-destructive dropdown-menu-item" onClick={onDeleteClick}>
                     Delete
                 </DropdownMenuItem>
             </DropdownMenuContent>