From 1a04c2cffe8cf7ebef1508b34cd47049723ba5f4 Mon Sep 17 00:00:00 2001 From: George Gevoian Date: Tue, 24 Oct 2023 18:57:29 -0400 Subject: [PATCH] (core) Improve context menu placement on narrow screens Summary: On narrow screens, the menu is now less likely to overflow the viewport. Test Plan: Manual. Reviewers: jarek Reviewed By: jarek Subscribers: jarek Differential Revision: https://phab.getgrist.com/D4094 --- app/client/ui/contextMenu.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/client/ui/contextMenu.ts b/app/client/ui/contextMenu.ts index e629cfcf..dbca888a 100644 --- a/app/client/ui/contextMenu.ts +++ b/app/client/ui/contextMenu.ts @@ -71,7 +71,9 @@ class ContextMenuController extends Disposable implements IOpenController { const ev = this._event; const rect = content.getBoundingClientRect(); // position menu on the right of the cursor if it can fit, on the left otherwise - content.style.left = ((ev.pageX + rect.width < window.innerWidth) ? ev.pageX : ev.pageX - rect.width) + 'px'; + content.style.left = ((ev.pageX + rect.width < window.innerWidth) + ? ev.pageX + : Math.max(ev.pageX - rect.width, 0)) + 'px'; // position menu below the cursor if it can fit, otherwise fit at the bottom of the screen content.style.bottom = Math.max(window.innerHeight - (ev.pageY + rect.height), 0) + 'px'; // show content