pretix-map 0.1.8__py3-none-any.whl → 0.1.9__py3-none-any.whl

{pretix_map-0.1.8.dist-info → pretix_map-0.1.9.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pretix-map
-Version: 0.1.8
+Version: 0.1.9
 Summary: An overview map of the catchment area of previous orders. Measured by postcode
 Author-email: MarkenJaden <jjsch1410@gmail.com>
 Maintainer-email: MarkenJaden <jjsch1410@gmail.com>

{pretix_map-0.1.8.dist-info → pretix_map-0.1.9.dist-info}/RECORD

@@ -1,5 +1,5 @@
-pretix_map-0.1.8.dist-info/licenses/LICENSE,sha256=MNMHjIJIjeQzQboYGsgFSRTBUHctF603DDa8MgCNyAg,554
-pretix_mapplugin/__init__.py,sha256=C69ADlbQREQlR15trneyA2sk8x0-oH4rDAX5fsv19_U,22
+pretix_map-0.1.9.dist-info/licenses/LICENSE,sha256=MNMHjIJIjeQzQboYGsgFSRTBUHctF603DDa8MgCNyAg,554
+pretix_mapplugin/__init__.py,sha256=XIaxbMbyiP-L3kguR1GhxirFblTXiHR1lMfDVITvHUI,22
 pretix_mapplugin/apps.py,sha256=QOo53Z6zX0yB-Rz6I92tAu051sP38hM2iJlP9sk2JEg,802
 pretix_mapplugin/geocoding.py,sha256=N_JyjYU_JBouwE3oaL3G1wI5jAyezZzS5IBMgI_GdWQ,6053
 pretix_mapplugin/models.py,sha256=u_px4eaKWbh1hnUb7bdBEIuJUnvsts1AJ5CMoWLeQO8,2677
@@ -22,7 +22,7 @@ pretix_mapplugin/migrations/0004_ordergeocodedata_success_level.py,sha256=Skl-dB
 pretix_mapplugin/migrations/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 pretix_mapplugin/static/pretix_mapplugin/.gitkeep,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 pretix_mapplugin/static/pretix_mapplugin/css/salesmap.css,sha256=HgKozvQjWTzxJV4ua1hT9PiDzrvUSWrMnYRUvTTj4aI,1870
-pretix_mapplugin/static/pretix_mapplugin/js/salesmap.js,sha256=CvdwCH1ATBOlSgRS_EdEIegw88emX96O9gjEBephWsA,34162
+pretix_mapplugin/static/pretix_mapplugin/js/salesmap.js,sha256=PhUEaF1JKzX0UDe2kafE1pc1WmM3yv9S_v4UkxaBw6g,32539
 pretix_mapplugin/static/pretix_mapplugin/libs/leaflet-sales-map/MarkerCluster.Default.css,sha256=YSWCMtmNZNwqex4CEw1nQhvFub2lmU7vcCKP-XVwwXA,1287
 pretix_mapplugin/static/pretix_mapplugin/libs/leaflet-sales-map/MarkerCluster.css,sha256=YU3qCpj_P06tdPBJGPax0bm6Q1wltfwjsho5TR4-TYc,872
 pretix_mapplugin/static/pretix_mapplugin/libs/leaflet-sales-map/leaflet-heat.js,sha256=65UqrlgGoRAnKfKRuriH3eeDrOhZgZo1SCenduc-SGo,5158
@@ -41,10 +41,10 @@ pretix_mapplugin/static/pretix_mapplugin/libs/leaflet-sales-map/images/marker-ic
 pretix_mapplugin/static/pretix_mapplugin/libs/leaflet-sales-map/images/marker-icon.png,sha256=V0w6XMqF9BFAhbaEFZbWLwDXyJLHsD8oy_owHesdxDc,1466
 pretix_mapplugin/static/pretix_mapplugin/libs/leaflet-sales-map/images/marker-shadow.png,sha256=Jk9cZAM58ELdcpBiz8BMF_jqDymIK1OOOEjtjxDttNo,618
 pretix_mapplugin/templates/pretix_mapplugin/.gitkeep,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-pretix_mapplugin/templates/pretix_mapplugin/map_page.html,sha256=u-Z5xG9KkC5bCB3lu4c14pDtT476fN_vrzuPntJbpKQ,12513
+pretix_mapplugin/templates/pretix_mapplugin/map_page.html,sha256=Sl82ULQ6qtLgI2d0OtQEX83mCs4mODsDZjIp3_3-DTc,12566
 pretix_mapplugin/templates/pretix_mapplugin/milestones.html,sha256=KamdrYmSmKgsy2-Pn-ChrYZf2Gel-iEA_vzOxRfR2sg,3080
-pretix_map-0.1.8.dist-info/METADATA,sha256=nhoj5v3L8Y9e6q1mfGO4tIF8c2yytjRQmiLPiaL9Swo,3575
-pretix_map-0.1.8.dist-info/WHEEL,sha256=wUyA8OaulRlbfwMtmQsvNngGrxQHAvkKcvRmdizlJi0,92
-pretix_map-0.1.8.dist-info/entry_points.txt,sha256=C3NAjeZHoCekafkLMCJynPcABRTK8AUprtQv7sUNDZs,137
-pretix_map-0.1.8.dist-info/top_level.txt,sha256=CAtEnkgA73zE9Gadm5mjt1SpXHBPOS-QWP0dQVoNToE,17
-pretix_map-0.1.8.dist-info/RECORD,,
+pretix_map-0.1.9.dist-info/METADATA,sha256=WFXQJiHPDUP5j7A1hQ_R0mE3hBfI_mzd5uGJwuZHu3E,3575
+pretix_map-0.1.9.dist-info/WHEEL,sha256=wUyA8OaulRlbfwMtmQsvNngGrxQHAvkKcvRmdizlJi0,92
+pretix_map-0.1.9.dist-info/entry_points.txt,sha256=C3NAjeZHoCekafkLMCJynPcABRTK8AUprtQv7sUNDZs,137
+pretix_map-0.1.9.dist-info/top_level.txt,sha256=CAtEnkgA73zE9Gadm5mjt1SpXHBPOS-QWP0dQVoNToE,17
+pretix_map-0.1.9.dist-info/RECORD,,

pretix_mapplugin/__init__.py

@@ -1 +1 @@
-__version__ = "0.1.8"
+__version__ = "0.1.9"

pretix_mapplugin/static/pretix_mapplugin/js/salesmap.js

@@ -53,6 +53,7 @@ document.addEventListener('DOMContentLoaded', function () {
         compareLabel: document.getElementById('compare-map-label'),
         mainLabel: document.getElementById('main-map-label'),
         heatmapReset: document.getElementById('heatmap-reset-btn'),
+        timelineContainer: document.getElementById('timeline-controls'),
         timeSlider: document.getElementById('timeline-slider'),
         timeDisplay: document.getElementById('timeline-date-display'),
         timePlayBtn: document.getElementById('timeline-play-btn'),
@@ -152,22 +153,14 @@ document.addEventListener('DOMContentLoaded', function () {
             sel.blurVal.textContent = sel.blurIn.value;
             sel.maxZoomVal.textContent = sel.maxZoomIn.value;
             
-            if (heatmapLayer) {
-                heatmapLayer.setOptions({ 
-                    radius: parseInt(sel.radiusIn.value), 
-                    blur: parseInt(sel.blurIn.value),
-                    maxZoom: parseInt(sel.maxZoomIn.value),
-                    minOpacity: 0.4
-                });
-            }
-            if (heatmapLayerComp) {
-                heatmapLayerComp.setOptions({ 
-                    radius: parseInt(sel.radiusIn.value), 
-                    blur: parseInt(sel.blurIn.value),
-                    maxZoom: parseInt(sel.maxZoomIn.value),
-                    minOpacity: 0.4
-                });
-            }
+            const opt = { 
+                radius: parseInt(sel.radiusIn.value), 
+                blur: parseInt(sel.blurIn.value),
+                maxZoom: parseInt(sel.maxZoomIn.value),
+                minOpacity: 0.4
+            };
+            if (heatmapLayer) heatmapLayer.setOptions(opt);
+            if (heatmapLayerComp) heatmapLayerComp.setOptions(opt);
         };
         [sel.radiusIn, sel.blurIn, sel.maxZoomIn].forEach(i => i.oninput = updateHeat);
         sel.heatmapReset.onclick = () => { 
@@ -180,8 +173,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     function switchDisplayMode(mode) {
         currentDisplayMode = mode;
-        sel.map.style.display = (mode === 'map' ? 'block' : 'none');
-        sel.mapSplitRoot.style.display = (mode === 'map' ? 'flex' : 'none'); // FIX
+        const isMap = (mode === 'map');
+        sel.map.style.display = isMap ? 'block' : 'none';
+        sel.mapSplitRoot.style.display = isMap ? 'flex' : 'none';
+        sel.timelineContainer.style.display = isMap ? 'block' : 'none';
         sel.failedContainer.style.display = (mode === 'list' ? 'block' : 'none');
         sel.analyticsView.style.display = (mode === 'stats' ? 'block' : 'none');
         
@@ -190,9 +185,11 @@ document.addEventListener('DOMContentLoaded', function () {
         sel.listToggle.textContent = (mode === 'list' ? 'Show Map' : 'Failed Orders');
         sel.statsToggle.textContent = (mode === 'stats' ? 'Show Map' : 'Analytics View');
 
-        if (mode === 'map') {
-             map.invalidateSize();
-             if (mapCompare) mapCompare.invalidateSize();
+        if (isMap) {
+             setTimeout(() => {
+                 map.invalidateSize();
+                 if (mapCompare) mapCompare.invalidateSize();
+             }, 50);
         }
     }
 
@@ -266,7 +263,6 @@ document.addEventListener('DOMContentLoaded', function () {
         const ctx = sel.timelineChart.getContext('2d');
         if (charts.timeline) charts.timeline.destroy();
 
-        // Calculate counts per step from filteredData
         const stepCounts = steps.map(ts => {
             const nextTsIndex = steps.indexOf(ts) + 1;
             const nextTs = nextTsIndex < steps.length ? steps[nextTsIndex] : Infinity;
@@ -289,10 +285,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 responsive: true,
                 maintainAspectRatio: false,
                 plugins: { legend: { display: false }, tooltip: { enabled: false } },
-                scales: {
-                    x: { display: false },
-                    y: { display: false, beginAtZero: true }
-                }
+                scales: { x: { display: false }, y: { display: false, beginAtZero: true } }
             }
         });
     }
@@ -300,20 +293,13 @@ document.addEventListener('DOMContentLoaded', function () {
     function renderMilestoneMarkers(steps) {
         if (!sel.timelineMarkers || !steps || steps.length === 0) return;
         sel.timelineMarkers.innerHTML = '';
-        
         milestones.forEach(m => {
-            // Find closest step index
-            let closestIdx = -1;
-            let minDiff = Infinity;
+            let closestIdx = -1, minDiff = Infinity;
             steps.forEach((ts, idx) => {
                 const diff = Math.abs(ts - m.ts);
-                if (diff < minDiff) {
-                    minDiff = diff;
-                    closestIdx = idx;
-                }
+                if (diff < minDiff) { minDiff = diff; closestIdx = idx; }
             });
-
-            if (closestIdx !== -1 && minDiff < 86400000 * 2) { // Only show if close enough (2 days)
+            if (closestIdx !== -1 && minDiff < 86400000 * 2) {
                 const percent = (closestIdx / (steps.length - 1)) * 100;
                 const marker = document.createElement('div');
                 marker.className = 'timeline-milestone-marker';
@@ -324,7 +310,6 @@ document.addEventListener('DOMContentLoaded', function () {
                 marker.style.height = '100%';
                 marker.style.background = '#d9534f';
                 marker.style.zIndex = '2';
-                
                 const label = document.createElement('span');
                 label.textContent = m.label;
                 label.style.position = 'absolute';
@@ -334,7 +319,6 @@ document.addEventListener('DOMContentLoaded', function () {
                 label.style.whiteSpace = 'nowrap';
                 label.style.background = 'rgba(255,255,255,0.7)';
                 label.style.padding = '0 2px';
-                
                 marker.appendChild(label);
                 sel.timelineMarkers.appendChild(marker);
             }
@@ -344,10 +328,7 @@ document.addEventListener('DOMContentLoaded', function () {
     function renderItemAvailability(steps) {
         if (!sel.itemAvailList || !steps || steps.length === 0) return;
         sel.itemAvailList.innerHTML = '';
-        
-        const minTs = steps[0];
-        const maxTs = steps[steps.length - 1];
-        const range = maxTs - minTs;
+        const minTs = steps[0], maxTs = steps[steps.length - 1], range = maxTs - minTs;
 
         Object.keys(itemAvailData).forEach(itemName => {
             const d = itemAvailData[itemName];
@@ -379,7 +360,6 @@ document.addEventListener('DOMContentLoaded', function () {
             barContainer.style.borderRadius = '3px';
             row.appendChild(barContainer);
 
-            // Planned availability (light grey bar)
             if (availFrom || availUntil) {
                 const start = availFrom ? Math.max(availFrom, minTs) : minTs;
                 const end = availUntil ? Math.min(availUntil, maxTs) : maxTs;
@@ -393,12 +373,10 @@ document.addEventListener('DOMContentLoaded', function () {
                     bar.style.height = '100%';
                     bar.style.background = '#ddd';
                     bar.style.borderRadius = '3px';
-                    bar.title = `${itemName} (Configured Availability)`;
                     barContainer.appendChild(bar);
                 }
             }
 
-            // Actual sales period (blue bar)
             if (firstTs && lastTs) {
                 const start = Math.max(firstTs, minTs);
                 const end = Math.min(lastTs, maxTs);
@@ -413,11 +391,9 @@ document.addEventListener('DOMContentLoaded', function () {
                     bar.style.background = '#36A2EB';
                     bar.style.borderRadius = '3px';
                     bar.style.zIndex = '1';
-                    bar.title = `${itemName} (Actual Sales)`;
                     barContainer.appendChild(bar);
                 }
             }
-
             sel.itemAvailList.appendChild(row);
         });
     }
@@ -455,14 +431,12 @@ document.addEventListener('DOMContentLoaded', function () {
     function refreshLayers() {
         if (!map) return;
         
-        // Remove old layers from both maps
         [pinLayer, heatmapLayer, gridLayer].forEach(l => { if (l && map.hasLayer(l)) map.removeLayer(l); });
         if (mapCompare) {
             [pinLayerComp, heatmapLayerComp, gridLayerComp, eventMarkerLayerComp].forEach(l => { if (l && mapCompare.hasLayer(l)) mapCompare.removeLayer(l); });
         }
         if (comparisonLayer && map.hasLayer(comparisonLayer)) map.removeLayer(comparisonLayer);
 
-        // Check if split mode is needed (Comparison selected AND heatmap/grid view)
         const isSplitNeeded = currentCompareSlug && (currentView === 'heatmap' || currentView === 'grid');
         
         if (isSplitNeeded) {
@@ -477,14 +451,11 @@ document.addEventListener('DOMContentLoaded', function () {
             setTimeout(() => { map.invalidateSize(); }, 50);
         }
 
-        // Create layers for main map
         createPinLayer(); createHeatmapLayer(); createGridLayer();
         
-        // Create layers for comparison map if in split mode
         if (isSplitNeeded) {
             createPinLayer(true); createHeatmapLayer(true); createGridLayer(true);
         } else if (currentCompareSlug && currentView === 'pins') {
-            // Pins comparison: Dots on the main map
             const dots = compareData.map(l => l.lat ? L.circleMarker([l.lat, l.lon], { radius: 4, color: '#888', fillOpacity: 0.5 }).bindTooltip("Comparison Order") : null).filter(l => l);
             comparisonLayer = L.layerGroup(dots);
         }
@@ -495,7 +466,6 @@ document.addEventListener('DOMContentLoaded', function () {
     function createPinLayer(isCompare = false) {
         const data = isCompare ? compareDisplayData : displayData;
         if (data.length === 0) { if(isCompare) pinLayerComp = null; else pinLayer = null; return; }
-        
         const markers = data.map(loc => {
             if (loc.lat == null) return null;
             let icon = icons.blue;
@@ -506,7 +476,6 @@ document.addEventListener('DOMContentLoaded', function () {
             if (loc.order_url) m.on('click', () => window.open(loc.order_url, '_blank'));
             return m;
         }).filter(m => m !== null);
-        
         const layer = isClustering ? L.markerClusterGroup().addLayers(markers) : L.layerGroup(markers);
         if (isCompare) pinLayerComp = layer; else pinLayer = layer;
     }
@@ -514,7 +483,6 @@ document.addEventListener('DOMContentLoaded', function () {
     function createHeatmapLayer(isCompare = false) {
         const data = isCompare ? compareDisplayData : displayData;
         if (data.length === 0) { if(isCompare) heatmapLayerComp = null; else heatmapLayer = null; return; }
-        
         let maxRev = Math.max(...data.map(d => d.revenue || 0), 1);
         const points = data.map(l => [l.lat, l.lon, isWeighted ? (l.revenue || 0) / maxRev : 1.0]);
         const layer = L.heatLayer(points, { 
@@ -529,11 +497,9 @@ document.addEventListener('DOMContentLoaded', function () {
     function createGridLayer(isCompare = false) {
         const data = isCompare ? compareDisplayData : displayData;
         if (data.length === 0) { if(isCompare) gridLayerComp = null; else gridLayer = null; return; }
-        
         const rawVal = parseInt(sel.gridSizeSlider.value);
         const gridSize = 0.4 * Math.pow(rawVal / 100, 2); 
         sel.gridSizeVal.textContent = gridSize.toFixed(3);
-
         const bins = {}; let maxVal = 0;
         data.forEach(l => {
             if (l.lat == null) return;
@@ -553,24 +519,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
     function showCurrentView() {
         if (!map) return;
-        
-        // Main map view
         if (currentView === 'pins' && pinLayer) map.addLayer(pinLayer);
         else if (currentView === 'heatmap' && heatmapLayer) map.addLayer(heatmapLayer);
         else if (currentView === 'grid' && gridLayer) map.addLayer(gridLayer);
-        
-        // Control panel updates
         sel.heatmapPanel.style.display = (currentView === 'heatmap' || currentView === 'grid' ? 'block' : 'none');
         sel.heatmapControls.style.display = (currentView === 'heatmap' ? 'block' : 'none');
         sel.gridControls.style.display = (currentView === 'grid' ? 'block' : 'none');
-        
         if (sel.clusterToggle) sel.clusterToggle.style.display = (currentView === 'pins' ? 'inline-block' : 'none');
         if (eventMarkerLayer) map.addLayer(eventMarkerLayer);
-        
-        // Dot comparison on main map
         if (comparisonLayer && currentView === 'pins') map.addLayer(comparisonLayer);
 
-        // Comparison map view (Split mode)
         if (mapCompare && sel.mapSplitRoot.classList.contains('map-split-active')) {
             if (currentView === 'pins' && pinLayerComp) mapCompare.addLayer(pinLayerComp);
             else if (currentView === 'heatmap' && heatmapLayerComp) mapCompare.addLayer(heatmapLayerComp);
@@ -582,10 +540,10 @@ document.addEventListener('DOMContentLoaded', function () {
     function renderEventMarker(em, isCompare = false) {
         const layer = L.marker([em.lat, em.lon], { icon: icons.red, zIndexOffset: 2000 }).bindTooltip(`<strong>EVENT: ${em.name}</strong><br>${em.location}`);
         if (isCompare) {
-            if (eventMarkerLayerComp && mapCompare.hasLayer(eventMarkerLayerComp)) mapCompare.removeLayer(eventMarkerLayerComp);
+            if (eventMarkerLayerComp) mapCompare.removeLayer(eventMarkerLayerComp);
             eventMarkerLayerComp = layer.addTo(mapCompare);
         } else {
-            if (eventMarkerLayer && map.hasLayer(eventMarkerLayer)) map.removeLayer(eventMarkerLayer);
+            if (eventMarkerLayer) map.removeLayer(eventMarkerLayer);
             eventMarkerLayer = layer.addTo(map);
         }
     }
@@ -597,18 +555,12 @@ document.addEventListener('DOMContentLoaded', function () {
             sel.compareLabel.textContent = "";
             refreshLayers(); return; 
         }
-        
         const option = sel.compareSelect.options[sel.compareSelect.selectedIndex];
         sel.compareLabel.textContent = option.text;
-        
         const newUrl = sel.map.dataset.dataUrl.replace(/\/event\/([^\/]+)\/([^\/]+)\//, `/event/$1/${slug}/`);
         fetch(newUrl).then(r => r.json()).then(data => {
             compareData = (data.locations || []).map(loc => { loc.ts = loc.date ? new Date(loc.date).getTime() : 0; return loc; }).sort((a, b) => a.ts - b.ts);
-            
-            // Handle event marker for comparison map
             if (data.event_marker) renderEventMarker(data.event_marker, true);
-            
-            // Sync filters for comparison data
             applyFilters();
         });
     }
@@ -626,12 +578,8 @@ document.addEventListener('DOMContentLoaded', function () {
     function applyFilters() {
         showCanceled = sel.showCanceledCheck.checked;
         const filterFn = loc => (loc.items.length === 0 || loc.items.some(i => selectedItems.has(i))) && (showCanceled || loc.status !== 'canceled');
-        
         filteredData = allData.filter(filterFn);
-        if (compareData.length > 0) {
-            compareFilteredData = compareData.filter(filterFn);
-        }
-        
+        if (compareData.length > 0) compareFilteredData = compareData.filter(filterFn);
         updateTimelineSlider();
     }
 
@@ -641,20 +589,8 @@ document.addEventListener('DOMContentLoaded', function () {
             let statusBadge = `<span class="label label-danger">Failed</span>`;
             if (o.success_level === 'city') statusBadge = `<span class="label label-warning">Only City</span>`;
             else if (o.success_level === 'zip') statusBadge = `<span class="label label-info">Only Zip</span>`;
-            
-            return `<tr>
-                <td><code>${o.code}</code></td>
-                <td>${o.address}</td>
-                <td>${statusBadge}</td>
-                <td>
-                    <div class="btn-group">
-                        <a href="${o.url}" target="_blank" class="btn btn-default btn-xs">View</a>
-                        <button class="btn btn-warning btn-xs retry-btn" data-url="${o.retry_url}">Retry</button>
-                    </div>
-                </td>
-            </tr>`;
+            return `<tr><td><code>${o.code}</code></td><td>${o.address}</td><td>${statusBadge}</td><td><div class="btn-group"><a href="${o.url}" target="_blank" class="btn btn-default btn-xs">View</a><button class="btn btn-warning btn-xs retry-btn" data-url="${o.retry_url}">Retry</button></div></td></tr>`;
         }).join('') || '<tr><td colspan="4">None</td></tr>';
-        
         sel.failedTbody.querySelectorAll('.retry-btn').forEach(btn => btn.onclick = () => {
             btn.disabled = true; btn.innerHTML = '...';
             fetch(btn.dataset.url, { method: 'POST', headers: { 'X-CSRFToken': csrfToken } }).then(r => r.json()).then(d => { if(d.success) { btn.className = 'btn btn-success btn-xs'; btn.innerHTML = '✔'; setTimeout(() => fetchData(sel.map.dataset.dataUrl), 1000); } });
@@ -662,4 +598,4 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     init();
-});
+});

pretix_mapplugin/templates/pretix_mapplugin/map_page.html

@@ -151,7 +151,7 @@
             </div>
         </div>
 
-        <div id="timeline-controls" style="margin-top: 10px; padding: 15px; background: #f5f5f5; border-radius: 4px; border: 1px solid #ddd; position: relative;">
+        <div id="timeline-controls" style="margin-top: 10px; padding: 15px; background: #f5f5f5; border-radius: 4px; border: 1px solid #ddd; position: relative; flex-shrink: 0;">
             <div id="timeline-chart-container" style="position: relative; height: 50px; margin-bottom: 10px; background: white; border: 1px solid #eee; overflow: hidden;">
                 <canvas id="timeline-volume-chart" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
                 <div id="timeline-milestone-markers" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></div>
@@ -164,7 +164,7 @@
                 </div>
             </div>
 
-            <div id="timeline-item-availability" style="margin-top: 10px; background: white; border: 1px solid #eee; padding: 10px 0;">
+            <div id="timeline-item-availability" style="margin-top: 10px; background: white; border: 1px solid #eee; padding: 10px 0; max-height: 150px; overflow-y: auto;">
                 <div id="item-availability-list" style="position: relative; padding: 0 5px;"></div>
             </div>