From 27c8b0095c88ef64fbbeaf7eb2fa91905e871a5b Mon Sep 17 00:00:00 2001
From: Charis Lam <26616127+charislam@users.noreply.github.com>
Date: Tue, 23 Sep 2025 20:37:22 -0400
Subject: [PATCH] fix: styling of draggable report block header

When the drag handle is showing, it overlaps with the block header.
Decrease the opacity of the header so the handle can be seen and the two
can be distinguished.
---
 .../Reports/ReportBlock/ReportBlockContainer.tsx           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlockContainer.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlockContainer.tsx
index 04f4dd9cc19..321e5064534 100644
--- a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlockContainer.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlockContainer.tsx
@@ -54,7 +54,12 @@ export const ReportBlockContainer = ({
             ) : (
               <Code size={16} strokeWidth={1.5} className="text-foreground-muted" />
             )}
-            <div className="flex items-center gap-2 flex-1">
+            <div
+              className={cn(
+                'flex items-center gap-2 flex-1 transition-opacity',
+                showDragHandle && 'group-hover:opacity-25'
+              )}
+            >
               <h3 className="heading-meta truncate">{label}</h3>
               {badge && <div className="flex items-center shrink-0">{badge}</div>}
             </div>