Use viewport bounds to position calendar popups

Replace CSS row/column heuristics (tr:last-child, weekday-N selectors) with
JavaScript that checks getBoundingClientRect() against the actual viewport,
toggling .popup-above and .popup-right classes as needed.

Author: bkembreeBPS

share/static/css/elevator/calendar.css

@@ -192,16 +192,21 @@ table.rt-calendar .ticket-entry span.calendar-event-detail {
     overflow-wrap: break-word;
 }
 
-/* Position popup above when in bottom rows */
-table.rt-calendar tbody tr:last-child .ticket-entry span.calendar-event-detail,
-table.rt-calendar tbody tr:nth-last-child(2) .ticket-entry span.calendar-event-detail {
+/* Position popup above when JS determines there is insufficient space below */
+table.rt-calendar .ticket-entry span.calendar-event-detail.popup-above {
     top: auto;
     bottom: calc(100% - 2px);
     margin-top: 0;
     margin-bottom: 2px;
 }
 
-/* Create a hover bridge to prevent popup from disappearing */
+/* Position popup right-aligned when JS determines it would overflow the right edge */
+table.rt-calendar .ticket-entry span.calendar-event-detail.popup-right {
+    left: unset;
+    right: 0;
+}
+
+/* Create a hover bridge to prevent popup from disappearing when moving mouse into it */
 table.rt-calendar .ticket-entry span.calendar-event-detail::before {
     content: '';
     position: absolute;
@@ -213,8 +218,7 @@ table.rt-calendar .ticket-entry span.calendar-event-detail::before {
 }
 
 /* Hover bridge for upward-positioned popups */
-table.rt-calendar tbody tr:last-child .ticket-entry span.calendar-event-detail::before,
-table.rt-calendar tbody tr:nth-last-child(2) .ticket-entry span.calendar-event-detail::before {
+table.rt-calendar .ticket-entry span.calendar-event-detail.popup-above::before {
     top: auto;
     bottom: -6px;
 }
@@ -248,15 +252,6 @@ table.rt-calendar .ticket-entry span.calendar-event-detail:hover {
     display: block !important;
 }
 
-table.rt-calendar td.weekday-7 .ticket-entry:hover span.calendar-event-detail,
-table.rt-calendar td.weekday-7 .ticket-entry span.calendar-event-detail:hover,
-table.rt-calendar td.weekday-6 .ticket-entry:hover span.calendar-event-detail,
-table.rt-calendar td.weekday-6 .ticket-entry span.calendar-event-detail:hover,
-table.rt-calendar td.weekday-5 .ticket-entry:hover span.calendar-event-detail,
-table.rt-calendar td.weekday-5 .ticket-entry span.calendar-event-detail:hover {
-    left: unset;
-    right: 24px;
-}
 
 .event-icon {
     float: left;

share/static/js/init.js

@@ -1,3 +1,22 @@
+function positionCalendarPopup(entry) {
+    const popup = entry.querySelector('.calendar-event-detail');
+    if (!popup) return;
+
+    const rect = entry.getBoundingClientRect();
+    const popupWidth = 350; // matches CSS width
+
+    popup.classList.toggle('popup-above', window.innerHeight - rect.bottom < 250);
+    popup.classList.toggle('popup-right', window.innerWidth - rect.left < popupWidth);
+}
+
+document.addEventListener('htmx:afterSwap', function(evt) {
+    const popup = evt.detail.elt;
+    if (popup.classList && popup.classList.contains('calendar-event-detail')) {
+        const entry = popup.closest('.ticket-entry');
+        if (entry) positionCalendarPopup(entry);
+    }
+});
+
 document.addEventListener('htmx:configRequest', function(evt) {
     for ( const param in evt.detail.parameters ) {
         if ( evt.detail.parameters[param + 'Type'] === 'text/html' && RT.CKEditor.instances[param] ) {
@@ -876,8 +895,11 @@ document.addEventListener('htmx:load', function(evt) {
 
     // Delay calendar popup requests so that mousing across the calendar
     // does not fire a request for every ticket the cursor passes over.
+    // Also calculate popup position from viewport bounds rather than
+    // relying on CSS row/column heuristics.
     elt.querySelectorAll('.ticket-entry[hx-trigger]').forEach(function(el) {
         el.addEventListener('mouseenter', function() {
+            positionCalendarPopup(el);
             el._calendarHoverTimer = setTimeout(() => htmx.trigger(el, 'calendar-hover'), 300);
         });
         el.addEventListener('mouseleave', function() {