fix route map preview image popovers in chrome

Tested with Firefox and things still seem to work there best I can tell!

Author: ztatlock

_includes/schedule_table.html

@@ -45,7 +45,10 @@
         {% endif %}
         <td class="{{part-cancelled-class}}">
             {% if plan.route_id %}
-            <a href="{{site.baseurl}}/routes/{{ plan.route_id }}/" title="{{ plan.route_id }}" popovertarget="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}">{{route.name}}</a>
+            <a href="{{site.baseurl}}/routes/{{ plan.route_id }}/"
+               class="route-preview-map-link"
+               title="{{ plan.route_id }}"
+               popovertarget="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}">{{route.name}}</a>
             <div id="map-popover-{{run.date | slugify}}-part-{{ forloop.index}}" class="route-map-popover" popover>
                 <img src="{{ '/img/routes/' | append: plan.route_id | append: '.jpg' | relative_url }}" alt="{{ route.name }} map" class="route-image" loading="lazy"/>
             </div>
@@ -98,4 +101,4 @@
     {% endfor %}
     <tfoot id="schedule-finished" style="display: none"><tr><td colspan="3">A new schedule is coming! <a href="https://github.com/raceconditionrunning/raceconditionrunning.github.io">Contribute on GitHub</a></td></tr></tfoot>
 </table>
-</div>
+</div>

_layouts/base.html

@@ -127,21 +127,52 @@ <h2 class="align-self-center">Race Condition Running</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.bundle.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
-    // Schedule table popovers on homepage and lore page
-    document.addEventListener("DOMContentLoaded", function() {
-        const popover = document.querySelectorAll("[popovertarget]");
+    (function() {
+        const GUTTER = 8;
 
-        popover.forEach((e) => {
-            const target = document.querySelector("#" + e.getAttribute("popovertarget"));
-            e.addEventListener("mouseover",()=>{
-                target.showPopover();
-            });
+        function getTarget(trigger) {
+            const targetId = trigger.getAttribute("popovertarget");
+            if (!targetId) {
+                return null;
+            }
+            return document.getElementById(targetId);
+        }
 
-            e.addEventListener("mouseout",()=>{
-                target.hidePopover();
-            });
-        });
-    });
+        function positionPopover(trigger, popover) {
+            const rect = trigger.getBoundingClientRect();
+            const left = Math.max(GUTTER, Math.min(rect.left, window.innerWidth - GUTTER));
+            popover.style.left = `${left}px`;
+            popover.style.top = `${rect.bottom + GUTTER}px`;
+        }
+
+        function handleMouseOver(event) {
+            const trigger = event.target.closest("[popovertarget]");
+            if (!trigger || trigger.contains(event.relatedTarget)) {
+                return;
+            }
+            const popover = getTarget(trigger);
+            if (!popover) {
+                return;
+            }
+            positionPopover(trigger, popover);
+            popover.showPopover();
+        }
+
+        function handleMouseOut(event) {
+            const trigger = event.target.closest("[popovertarget]");
+            if (!trigger || trigger.contains(event.relatedTarget)) {
+                return;
+            }
+            const popover = getTarget(trigger);
+            if (!popover) {
+                return;
+            }
+            popover.hidePopover();
+        }
+
+        document.addEventListener("mouseover", handleMouseOver);
+        document.addEventListener("mouseout", handleMouseOut);
+    })();
 </script>
 </body>
 </html>

css/style.scss

@@ -125,13 +125,28 @@ tr:has(+ tr) td {
   padding-bottom: .25rem;
 }
 
-:popover-open {
-  position: absolute;
+.route-map-popover {
+  pointer-events: none;
+}
+
+.route-map-popover:popover-open {
+  position: fixed;
   inset: unset;
   border: 1px solid gray;
+  background-color: var(--bs-body-bg);
+  padding: .25rem;
+  z-index: 1000;
+  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.35);
 }
-:popover-open img {
+
+.route-map-popover img {
   max-width: 80vw;
+  height: auto;
+  display: block;
+}
+
+.schedule-table .route-map-popover img {
+  max-width: min(36rem, 80vw);
 }
 
 :target {

pages/routes.html

@@ -136,24 +136,20 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
                         const container = document.createElement("div");
                         container.innerHTML = `
       <a href="${route.id}/"
+         class="route-preview-map-link"
          title="${route.id}"
          popovertarget="${popoverId}">
         ${value}
       </a>
       <div id="${popoverId}"
            class="route-map-popover"
            popover>
-        <img src="{{ '/img/routes/' | absolute_url }}${route.id}.jpg"
+        <img src="{{ '/img/routes/' | relative_url }}${route.id}.jpg"
              alt="${route.name} map"
              class="route-image"
              loading="lazy" />
       </div>
     `;
-                        const link = container.querySelector('a');
-                        const popover = container.querySelector('.route-map-popover');
-                        link.addEventListener('mouseover', () => popover.showPopover());
-                        link.addEventListener('mouseout', () => popover.hidePopover());
-
                         return container;
                     }
                 },