From b892f540c8d236e6175615be9ab236309a2e162f Mon Sep 17 00:00:00 2001
From: Viacheslav Dovgal <dovgal.v@brainrocket.com>
Date: Sun, 22 Mar 2026 11:34:08 +0200
Subject: [PATCH] feat(ui): close resource and Helm drawers by clicking outside

Add a transparent backdrop overlay behind the resource detail drawer
and Helm release drawer so users can dismiss them by clicking any
empty area, instead of having to click the same row again.

Made-with: Cursor
---
 .../components/workload/ResourceDetailDrawer.tsx   | 14 ++++++++++++++
 web/src/components/helm/HelmReleaseDrawer.tsx      | 12 ++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/packages/k8s-ui/src/components/workload/ResourceDetailDrawer.tsx b/packages/k8s-ui/src/components/workload/ResourceDetailDrawer.tsx
index e4b8eb7ad..5f4b6582a 100644
--- a/packages/k8s-ui/src/components/workload/ResourceDetailDrawer.tsx
+++ b/packages/k8s-ui/src/components/workload/ResourceDetailDrawer.tsx
@@ -113,6 +113,19 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   const headerHeight = headerHeightProp ?? 49
 
   return (
+    <>
+      {/* Backdrop — only shown in drawer mode (not expanded), closes on click */}
+      {!expanded && (
+        <div
+          className={clsx(
+            'fixed inset-0 z-30 transition-opacity duration-300',
+            isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none',
+          )}
+          style={{ top: headerHeight }}
+          onClick={onClose}
+        />
+      )}
+
     <div
       className={clsx(
         'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-2xl z-40',
@@ -154,5 +167,6 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         onCollapseToDrawer: onCollapse ? () => onCollapse() : undefined,
       })}
     </div>
+    </>
   )
 }
diff --git a/web/src/components/helm/HelmReleaseDrawer.tsx b/web/src/components/helm/HelmReleaseDrawer.tsx
index e17e7bd2a..850a5f56c 100644
--- a/web/src/components/helm/HelmReleaseDrawer.tsx
+++ b/web/src/components/helm/HelmReleaseDrawer.tsx
@@ -282,6 +282,17 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   }
 
   return (
+    <>
+      {/* Backdrop — closes drawer on click */}
+      <div
+        className={clsx(
+          'fixed inset-0 z-30 transition-opacity duration-300',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none',
+        )}
+        style={{ top: headerHeight }}
+        onClick={onClose}
+      />
+
     <div
       className={clsx(
         'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-2xl z-40',
@@ -533,6 +544,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
         {upgradeProgress.length > 0 && <ProgressLog entries={upgradeProgress} />}
       </ConfirmDialog>
     </div>
+    </>
   )
 }