From a89f1c22003b1f68aaf02e4313cd4ac7c9645cf5 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Wed, 13 Mar 2024 12:41:18 +0100
Subject: [PATCH] Popover Menu: fix issue hiding menu behind scrollable
 container (#84311)

* PopoverMenu: change position to fixed

* PopoverMenu: close on empty selectionchange

* Popover Menu: do not let menu overflow the window dimensions

* Prettier
---
 public/app/features/explore/Logs/PopoverMenu.tsx |  2 +-
 public/app/features/logs/components/LogRows.tsx  | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/Logs/PopoverMenu.tsx b/public/app/features/explore/Logs/PopoverMenu.tsx
index 5d2fb53f0e1..fe62668307c 100644
--- a/public/app/features/explore/Logs/PopoverMenu.tsx
+++ b/public/app/features/explore/Logs/PopoverMenu.tsx
@@ -94,7 +94,7 @@ function track(action: string, selectionLength: number, dataSourceType: string |
 
 const getStyles = (theme: GrafanaTheme2) => ({
   menu: css({
-    position: 'absolute',
+    position: 'fixed',
     zIndex: theme.zIndex.modal,
   }),
 });
diff --git a/public/app/features/logs/components/LogRows.tsx b/public/app/features/logs/components/LogRows.tsx
index 84c47088eff..e675ff33967 100644
--- a/public/app/features/logs/components/LogRows.tsx
+++ b/public/app/features/logs/components/LogRows.tsx
@@ -121,14 +121,20 @@ class UnThemedLogRows extends PureComponent<Props, State> {
     if (!this.logRowsRef.current) {
       return false;
     }
-    const parentBounds = this.logRowsRef.current?.getBoundingClientRect();
+
+    const MENU_WIDTH = 270;
+    const MENU_HEIGHT = 105;
+    const x = e.clientX + MENU_WIDTH > window.innerWidth ? window.innerWidth - MENU_WIDTH : e.clientX;
+    const y = e.clientY + MENU_HEIGHT > window.innerHeight ? window.innerHeight - MENU_HEIGHT : e.clientY;
+
     this.setState({
       selection,
-      popoverMenuCoordinates: { x: e.clientX - parentBounds.left, y: e.clientY - parentBounds.top },
+      popoverMenuCoordinates: { x, y },
       selectedRow: row,
     });
     document.addEventListener('click', this.handleDeselection);
     document.addEventListener('contextmenu', this.handleDeselection);
+    document.addEventListener('selectionchange', this.handleDeselection);
     return true;
   };
 
@@ -147,6 +153,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
   closePopoverMenu = () => {
     document.removeEventListener('click', this.handleDeselection);
     document.removeEventListener('contextmenu', this.handleDeselection);
+    document.removeEventListener('selectionchange', this.handleDeselection);
     this.setState({
       selection: '',
       popoverMenuCoordinates: { x: 0, y: 0 },