Fix scrolling map filters panel on mobile

views/webpage_map.tpl

@@ -1,7 +1,7 @@
 % rebase('webpage_base.tpl')
 
 <div id="map">
-    <div class="mt-3 px-3" style="z-index: 1002; position: relative;">
+    <div id="maptools" class="mt-3 px-3" style="z-index: 1002; position: relative;">
         <div class="row">
             <div class="col-auto me-auto pt-3"></div>
             <div class="col-auto">

webassets/css/style.css

@@ -246,13 +246,24 @@ div.band-spot:hover span.band-spot-info {
 /* GENERAL MOBILE SUPPORT */
 
 @media (max-width: 991.99px) {
+    /* General "hide this on mobile" class */
     .hideonmobile {
         display: none !important;
     }
+    /* Make map stretch to horizontal screen edges */
     div#map, div#table-container, div#bands-container {
         margin-left: -1em;
         margin-right: -1em;
     }
+    /* Avoid map page filters panel being larger than the map itself */
+    #maptools .appearing-panel {
+        max-height: 30em;
+    }
+    #maptools .appearing-panel .card-body {
+        max-height: 26em;
+        overflow: scroll;
+    }
+    /* Filter/search DX Call field should be smaller on mobile */
     input#filter-dx-call {
         max-width: 6em;
         margin-right: 0;

webassets/js/map.js

@@ -249,4 +249,6 @@ $(document).ready(function() {
     setUpMap();
     // Call loadOptions(), this will then trigger loading spots and setting up timers.
     loadOptions();
+    // Prevent scrolling actions in the popup menus being passed through to the map
+    L.DomEvent.disableScrollPropagation(document.getElementById('maptools'));
 });