From 25342b79b37b39a0a51bce2794b793d5fdc9f666 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 23 Jul 2025 22:41:47 -0600
Subject: [PATCH] Fix flickering bug

---
 .../DashboardMetricItem/MetricItemCardThreeDotMenu.tsx    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx b/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx
index 3b53a0039..c433d393b 100644
--- a/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx
+++ b/apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricItemCardThreeDotMenu.tsx
@@ -99,7 +99,13 @@ const MetricItemCardThreeDotMenuPopover: React.FC<{
         e.stopPropagation();
         e.preventDefault();
       }}
-      className={cn('hidden w-8.5 rounded group-hover:block', className, isOpen && 'block')}>
+      className={cn(
+        // Use opacity and pointer-events instead of display:none to maintain positioning context
+        'w-8.5 rounded transition-opacity duration-75',
+        'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100',
+        className,
+        isOpen && 'pointer-events-auto opacity-100'
+      )}>
       <div className="absolute right-1.5">
         <Dropdown items={dropdownItems} side="top" align="end" onOpenChange={setIsOpen}>
           {children}