diff --git a/webapp/static/app.js b/webapp/static/app.js index 97bee14..c5c6cd7 100644 --- a/webapp/static/app.js +++ b/webapp/static/app.js @@ -510,3 +510,17 @@ document.addEventListener('keydown', function (e) { if (s && d.contains(document.activeElement)) s.focus(); }); }); + +// Keep an opened menu inside the window: a right-aligned menu under a button +// near the left edge (a wrapped page header, a phone) would start off-screen. +document.addEventListener('toggle', function (e) { + var d = e.target; + if (!d.matches || !d.matches('details.more') || !d.open) return; + var m = d.querySelector('.menu'); + if (!m) return; + m.style.transform = ''; + var r = m.getBoundingClientRect(), pad = 8, dx = 0; + if (r.left < pad) dx = pad - r.left; + else if (r.right > window.innerWidth - pad) dx = window.innerWidth - pad - r.right; + if (dx) m.style.transform = 'translateX(' + Math.round(dx) + 'px)'; +}, true); diff --git a/webapp/static/pxe-ui.css b/webapp/static/pxe-ui.css index 6d426fd..9c58fa8 100644 --- a/webapp/static/pxe-ui.css +++ b/webapp/static/pxe-ui.css @@ -203,11 +203,11 @@ details.more .menu { background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 6px 18px var(--shadow); padding: 4px; display: flex; flex-direction: column; text-align: left; } -details.more .menu a, details.more .menu button, details.more .menu form > button { +details.more .menu a:not(.ui-btn):not(.fbtn), details.more .menu button:not(.ui-btn):not(.fbtn) { display: block; width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text); text-decoration: none; text-align: left; border-radius: 5px; cursor: pointer; white-space: nowrap; } -details.more .menu a:hover, details.more .menu button:hover { background: var(--surface-3); } +details.more .menu a:not(.ui-btn):not(.fbtn):hover, details.more .menu button:not(.ui-btn):not(.fbtn):hover { background: var(--surface-3); } details.more .menu .sep { height: 1px; background: var(--line); margin: 4px 0; } details.more .menu .del { color: var(--fail-text); } details.more .menu [disabled] { color: var(--muted); cursor: not-allowed; } diff --git a/webapp/templates/reports.html b/webapp/templates/reports.html index 50a3387..57c2da2 100644 --- a/webapp/templates/reports.html +++ b/webapp/templates/reports.html @@ -73,6 +73,7 @@