fix upper most context menu item sometimes not clickable in electron (#…

…14401)

* fix upper most context menu item sometimes not clickable in electron

Signed-off-by: Jonah Iden <jonah.iden@typefox.io>

* retrieve top panel height instead of hardcoding it

Signed-off-by: Jonah Iden <jonah.iden@typefox.io>

---------

Signed-off-by: Jonah Iden <jonah.iden@typefox.io>

packages/core/src/electron-browser/menu/electron-context-menu-renderer.ts

@@ -23,7 +23,7 @@ import {
 import { ElectronMainMenuFactory } from './electron-main-menu-factory';
 import { ContextMenuContext } from '../../browser/menu/context-menu-context';
 import { MenuPath, MenuContribution, MenuModelRegistry } from '../../common';
-import { BrowserContextMenuRenderer } from '../../browser/menu/browser-context-menu-renderer';
+import { BrowserContextMenuAccess, BrowserContextMenuRenderer } from '../../browser/menu/browser-context-menu-renderer';
 
 export class ElectronContextMenuAccess extends ContextMenuAccess {
     constructor(readonly menuHandle: Promise<number>) {
@@ -115,7 +115,15 @@ export class ElectronContextMenuRenderer extends BrowserContextMenuRenderer {
             this.context.resetAltPressed();
             return new ElectronContextMenuAccess(menuHandle);
         } else {
-            return super.doRender(options);
+            const menuAccess = super.doRender(options);
+            const node = (menuAccess as BrowserContextMenuAccess).menu.node;
+            const topPanelHeight = document.getElementById('theia-top-panel')?.clientHeight ?? 0;
+            // ensure the context menu is not displayed outside of the main area
+            if (node.style.top && parseInt(node.style.top.substring(0, node.style.top.length - 2)) < topPanelHeight) {
+                node.style.top = `${topPanelHeight}px`;
+                node.style.maxHeight = `calc(${node.style.maxHeight} - ${topPanelHeight}px)`;
+            }
+            return menuAccess;
         }
     }