From e9cf4d18ba09ad5456459c6e2f078d14dc14decc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 6 Jun 2025 20:10:50 +0530
Subject: [PATCH] [WEB-4268] fix: quick action dropdown overflow issue in
 initiatives item #3345

---
 .../epics/epic-list-item/root.tsx                  | 14 ++++++++++++--
 .../projects/project-list-item/index.tsx           | 11 ++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/ee/components/initiatives/details/main/collapsible-section/epics/epic-list-item/root.tsx b/web/ee/components/initiatives/details/main/collapsible-section/epics/epic-list-item/root.tsx
index 1eb73d9561..99215329f1 100644
--- a/web/ee/components/initiatives/details/main/collapsible-section/epics/epic-list-item/root.tsx
+++ b/web/ee/components/initiatives/details/main/collapsible-section/epics/epic-list-item/root.tsx
@@ -109,7 +109,17 @@ export const EpicListItem: React.FC<Props> = observer((props) => {
         </>
       }
       quickActionElement={
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="block md:hidden">
+          <EpicQuickActions
+            workspaceSlug={workspaceSlug}
+            epicId={epicId}
+            initiativeId={initiativeId}
+            disabled={disabled}
+          />
+        </div>
+      }
+      actionableItems={
+        <>
           <EpicProperties
             workspaceSlug={workspaceSlug}
             initiativeId={initiativeId}
@@ -126,7 +136,7 @@ export const EpicListItem: React.FC<Props> = observer((props) => {
               disabled={disabled}
             />
           </div>
-        </div>
+        </>
       }
       itemClassName="overflow-visible"
       isMobile={isMobile}
diff --git a/web/ee/components/initiatives/details/main/collapsible-section/projects/project-list-item/index.tsx b/web/ee/components/initiatives/details/main/collapsible-section/projects/project-list-item/index.tsx
index 1a2530712d..a7fa80c515 100644
--- a/web/ee/components/initiatives/details/main/collapsible-section/projects/project-list-item/index.tsx
+++ b/web/ee/components/initiatives/details/main/collapsible-section/projects/project-list-item/index.tsx
@@ -66,7 +66,12 @@ export const ProjectItem = observer((props: Props) => {
         </>
       }
       quickActionElement={
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="block md:hidden">
+          <QuickActions project={projectDetails} workspaceSlug={workspaceSlug.toString()} initiativeId={initiativeId} />
+        </div>
+      }
+      actionableItems={
+        <>
           <Attributes
             project={projectDetails}
             isArchived={projectDetails.archived_at !== null}
@@ -81,14 +86,14 @@ export const ProjectItem = observer((props: Props) => {
               date: isProjectGroupingEnabled,
             }}
           />
-          <div className={cn("hidden md:flex")}>
+          <div className="hidden md:flex">
             <QuickActions
               project={projectDetails}
               workspaceSlug={workspaceSlug.toString()}
               initiativeId={initiativeId}
             />
           </div>
-        </div>
+        </>
       }
       itemClassName="overflow-visible"
       isMobile={isMobile}