From c2749052d73ff016d5f3d1bbeff592c54753a15e Mon Sep 17 00:00:00 2001
From: Miguel Carvajal <krvajal.miguelangel@gmail.com>
Date: Tue, 8 Oct 2019 19:57:50 +0200
Subject: [PATCH] Graph: make ContextMenu potitioning aware of the viewport
 width (#19699)

---
 .../components/ContextMenu/ContextMenu.tsx    | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index 4ab5899496a..83d739658b2 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
@@ -162,15 +162,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
 
   return (
     <Portal>
-      <div
-        ref={menuRef}
-        style={{
-          position: 'fixed',
-          left: x - 5,
-          top: y + 5,
-        }}
-        className={styles.wrapper}
-      >
+      <div ref={menuRef} style={getStyle(menuRef.current)} className={styles.wrapper}>
         {renderHeader && <div className={styles.header}>{renderHeader()}</div>}
         <List
           items={items || []}
@@ -185,6 +177,25 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
       </div>
     </Portal>
   );
+
+  function getStyle(menuNode: HTMLDivElement | null) {
+    const haventMeasuredMenuYet = !menuNode;
+    if (haventMeasuredMenuYet) {
+      return { visibility: 'hidden' as const };
+    }
+    const rect = menuNode!.getBoundingClientRect();
+    const OFFSET = 5;
+    const collisions = {
+      right: window.innerWidth < x + rect.width,
+      bottom: window.innerHeight < rect.bottom + rect.height + OFFSET,
+    };
+
+    return {
+      position: 'fixed' as const,
+      left: collisions.right ? x - rect.width - OFFSET : x - OFFSET,
+      top: collisions.bottom ? y - rect.height - OFFSET : y + OFFSET,
+    };
+  }
 });
 
 interface ContextMenuItemProps {