diff --git a/TODO.md b/TODO.md index c7aab48..4a3a65d 100644 --- a/TODO.md +++ b/TODO.md @@ -1,3 +1,4 @@ # TODO - [x] Fix relinked file not appearing in FilePond UI: switch to ID-based input lookup +- [x] Fix student name popover overflowing below viewport: clamp position so popover stays within screen bounds diff --git a/app/public/assets/js/app/repertoire-student-popover.js b/app/public/assets/js/app/repertoire-student-popover.js index 1d44a33..a423303 100644 --- a/app/public/assets/js/app/repertoire-student-popover.js +++ b/app/public/assets/js/app/repertoire-student-popover.js @@ -15,6 +15,16 @@ if (left + 300 > window.innerWidth + window.scrollX) { left = r.left + window.scrollX - 312; } + // Keep popover within viewport vertically + var popHeight = popover.offsetHeight || 300; + var viewBottom = window.innerHeight + window.scrollY; + if (top + popHeight > viewBottom) { + top = viewBottom - popHeight - 8; + // Don't shift above the viewport top + if (top < window.scrollY) { + top = window.scrollY + 8; + } + } popover.style.left = `${left}px`; popover.style.top = `${top}px`; }