Graph: make ContextMenu potitioning aware of the viewport width (#19699)

packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx

@@ -162,15 +162,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
 
 
   return (
   return (
     <Portal>
     <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>}
         {renderHeader && <div className={styles.header}>{renderHeader()}</div>}
         <List
         <List
           items={items || []}
           items={items || []}
@@ -185,6 +177,25 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
       </div>
       </div>
     </Portal>
     </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 {
 interface ContextMenuItemProps {