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 { 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 { closePopoverMenu = () => { document.removeEventListener('click', this.handleDeselection); document.removeEventListener('contextmenu', this.handleDeselection); + document.removeEventListener('selectionchange', this.handleDeselection); this.setState({ selection: '', popoverMenuCoordinates: { x: 0, y: 0 },