From 0646d77dccf6f022cab98b7b2da96e1b415edbb9 Mon Sep 17 00:00:00 2001 From: Lewis Goddard Date: Sat, 14 Mar 2026 02:22:31 +0000 Subject: [PATCH 1/3] Fix popover being off screen. --- _scripts/popover.js | 22 ++++++++++++++++++++-- _styles/main.css | 4 ++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/_scripts/popover.js b/_scripts/popover.js index 9eef9a466d..807b794793 100644 --- a/_scripts/popover.js +++ b/_scripts/popover.js @@ -25,8 +25,26 @@ jQuery.then(($) => { e.stopPropagation() }) - const popoverPos = ($popover.outerWidth() / 2) - ($content.outerWidth() / 2) - $content.css({ left: popoverPos }) + const popoverWidth = $popover.outerWidth() + const contentWidth = $content.outerWidth() + let popoverPos = (popoverWidth / 2) - (contentWidth / 2) + + const popoverRect = $popover[0].getBoundingClientRect() + const contentRight = popoverRect.left + popoverPos + contentWidth + const viewportWidth = document.documentElement.clientWidth + + if (contentRight > viewportWidth) { + popoverPos -= (contentRight - viewportWidth) + } + + const contentLeft = popoverRect.left + popoverPos + if (contentLeft < 0) { + popoverPos -= contentLeft + } + + const arrowLeft = (popoverWidth / 2) - popoverPos + $content[0].style.setProperty('--popover-left', popoverPos + 'px') + $content[0].style.setProperty('--arrow-left', arrowLeft + 'px') $document.one('click scroll touchmove mousewheel wheel', function (event) { if (!$(event.target).is('.popover-content *')) { diff --git a/_styles/main.css b/_styles/main.css index 9568700458..dcd8bb2781 100644 --- a/_styles/main.css +++ b/_styles/main.css @@ -1238,7 +1238,7 @@ So that for browsers that dont we can have a sensible inline style that can be a bottom: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); color: #333; - left: -70px; + left: var(--popover-left, -70px); opacity: 0; position: absolute; text-align: left; @@ -1254,7 +1254,7 @@ So that for browsers that dont we can have a sensible inline style that can be a content: ""; display: block; height: 0; - left: 50%; + left: var(--arrow-left, 50%); margin-left: -5px; position: absolute; width: 0; From c9594fbda0f81a87287943fc9d37ddc596b30e78 Mon Sep 17 00:00:00 2001 From: Lewis Goddard Date: Sat, 14 Mar 2026 02:51:09 +0000 Subject: [PATCH 2/3] Fix not opening after three clicks. --- _scripts/popover.js | 21 ++++++++++----------- _styles/main.css | 1 + 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/_scripts/popover.js b/_scripts/popover.js index 807b794793..abafb4cf5f 100644 --- a/_scripts/popover.js +++ b/_scripts/popover.js @@ -11,13 +11,15 @@ jQuery.then(($) => { $document.on('click', '.popover > a', function (event) { event.preventDefault() + event.stopPropagation() - const $body = $('body') - const $link = $(event.target) - const $popover = $link.parent() + const $popover = $(event.target).closest('.popover') const $content = $popover.find('.popover-content') - $body.css({ overflow: 'hidden' }) + if ($popover.hasClass('active')) { + $popover.removeClass('active') + return + } $popover.addClass('active') @@ -46,16 +48,13 @@ jQuery.then(($) => { $content[0].style.setProperty('--popover-left', popoverPos + 'px') $content[0].style.setProperty('--arrow-left', arrowLeft + 'px') - $document.one('click scroll touchmove mousewheel wheel', function (event) { - if (!$(event.target).is('.popover-content *')) { - event.stopImmediatePropagation() - event.preventDefault() + $document.on('click.popover scroll.popover touchmove.popover', function (e) { + if ($(e.target).closest('.popover-content').length) { + return } - $body.css({ overflow: 'visible' }) - $popover.removeClass('active') - $body.click() + $document.off('.popover') }) }) }) diff --git a/_styles/main.css b/_styles/main.css index dcd8bb2781..6f12259c5f 100644 --- a/_styles/main.css +++ b/_styles/main.css @@ -19,6 +19,7 @@ body { font-weight: 400; margin: 0; min-height: 100vh; + overflow-x: hidden; } *, From c557700bacfe14f4491e484e71b849d8c705a1eb Mon Sep 17 00:00:00 2001 From: Lewis Goddard Date: Sat, 14 Mar 2026 02:54:12 +0000 Subject: [PATCH 3/3] Comment code. --- _scripts/popover.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/_scripts/popover.js b/_scripts/popover.js index abafb4cf5f..e756c74dfa 100644 --- a/_scripts/popover.js +++ b/_scripts/popover.js @@ -11,6 +11,9 @@ jQuery.then(($) => { $document.on('click', '.popover > a', function (event) { event.preventDefault() + + // Stop propagation so this click doesn't immediately trigger + // the document-level close handler registered below event.stopPropagation() const $popover = $(event.target).closest('.popover') @@ -23,10 +26,14 @@ jQuery.then(($) => { $popover.addClass('active') + // Prevent scroll events inside the popover content from + // bubbling up to the document close handler $content.on('scroll touchmove mousewheel wheel', function (e) { e.stopPropagation() }) + // Position the popover centered on its trigger, then clamp it + // within the viewport so it doesn't cause horizontal overflow const popoverWidth = $popover.outerWidth() const contentWidth = $content.outerWidth() let popoverPos = (popoverWidth / 2) - (contentWidth / 2) @@ -44,10 +51,14 @@ jQuery.then(($) => { popoverPos -= contentLeft } + // Move the arrow to stay aligned with the trigger button, + // compensating for how far the content was shifted const arrowLeft = (popoverWidth / 2) - popoverPos $content[0].style.setProperty('--popover-left', popoverPos + 'px') $content[0].style.setProperty('--arrow-left', arrowLeft + 'px') + // Close when the user interacts outside the popover content. + // Uses namespaced events so we can cleanly unbind them all at once $document.on('click.popover scroll.popover touchmove.popover', function (e) { if ($(e.target).closest('.popover-content').length) { return