(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
This commit is contained in:
George Gevoian 2023-10-24 18:57:29 -04:00
parent fed697e676
commit 1a04c2cffe

View File

@ -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