From 77f54585de36da6ebea0fa77e49cbf19506b67d4 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 29 Aug 2022 08:14:22 -0300
Subject: [PATCH] chore: Keeps context menu in viewport (#21212)

---
 .../src/components/Chart/ChartContextMenu.tsx   | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Chart/ChartContextMenu.tsx b/superset-frontend/src/components/Chart/ChartContextMenu.tsx
index b2bc211cb2..612bd455d0 100644
--- a/superset-frontend/src/components/Chart/ChartContextMenu.tsx
+++ b/superset-frontend/src/components/Chart/ChartContextMenu.tsx
@@ -27,6 +27,9 @@ import { QueryObjectFilterClause, t, styled } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import { AntdDropdown as Dropdown } from 'src/components';
 
+const MENU_ITEM_HEIGHT = 32;
+const MENU_VERTICAL_SPACING = 32;
+
 export interface ChartContextMenuProps {
   id: string;
   onSelection: (filters: QueryObjectFilterClause[]) => void;
@@ -82,7 +85,19 @@ const ChartContextMenu = (
 
   const open = useCallback(
     (filters: QueryObjectFilterClause[], clientX: number, clientY: number) => {
-      setState({ filters, clientX, clientY });
+      // Viewport height
+      const vh = Math.max(
+        document.documentElement.clientHeight || 0,
+        window.innerHeight || 0,
+      );
+
+      // +1 for automatically added options such as 'All' and 'Drill to detail'
+      const itemsCount = filters.length + 1;
+      const menuHeight = MENU_ITEM_HEIGHT * itemsCount + MENU_VERTICAL_SPACING;
+      // Always show the context menu inside the viewport
+      const adjustedY = vh - clientY < menuHeight ? vh - menuHeight : clientY;
+
+      setState({ filters, clientX, clientY: adjustedY });
 
       // Since Ant Design's Dropdown does not offer an imperative API
       // and we can't attach event triggers to charts SVG elements, we