diff --git a/app/templates/base.html b/app/templates/base.html index cdd0ee6..693da48 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -1071,10 +1071,20 @@ }, showContextMenu(event, pageId, pageName) { + var x = event.clientX, y = event.clientY; + // Prevent menu from overflowing right edge + var viewW = window.innerWidth; + var viewH = window.innerHeight; + var menuW = 210; // max-width ~240, safe estimate + var menuH = 360; // approximate max height + if (x + menuW > viewW) x = viewW - menuW - 8; + if (y + menuH > viewH) y = viewH - menuH - 8; + if (x < 0) x = 8; + if (y < 0) y = 8; this.contextMenu = { visible: true, - x: event.clientX, - y: event.clientY, + x: x, + y: y, pageId: pageId, pageName: pageName }; diff --git a/static/css/app.css b/static/css/app.css index 73ea146..cc98843 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -2782,7 +2782,7 @@ button.breadcrumb-current { max-width: 260px; } position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-modal); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); - min-width: 200px; z-index: 100; padding: 4px 0; + min-width: unset; width: max-content; z-index: 100; padding: 4px 0; } .more-menu-item { padding: 8px 14px; font-size: 13px; color: var(--text-primary);