Merge pull request #61 from ok2/codex/fix-event-overflow-in-detail-view

script.js

@@ -743,14 +743,17 @@ function showEonstripDetail(index, startCob) {
         const width = 100 / (columns.length || 1);
         events.forEach(ev=>{
             const left = ev.col * width;
+            const displayStart = Math.max(0, ev.start);
+            const displayEnd   = Math.min(1, ev.end);
             const elem = document.createElement(ev.end > ev.start ? 'div' : 'div');
             if (ev.end > ev.start) {
                 elem.className = 'event-box';
-                elem.style.height=((ev.end-ev.start)*100)+'%';
+                const h = (displayEnd - displayStart) * 100;
+                elem.style.height = (h > 0 ? h : 0) + '%';
             } else {
                 elem.className = 'event-line';
             }
-            elem.style.top=(ev.start*100)+'%';
+            elem.style.top = (displayStart * 100) + '%';
             elem.style.left = left + '%';
             elem.style.width = `calc(${width}% - 2px)`;
             elem.textContent = ev.label;

style.css

@@ -403,6 +403,7 @@
   height: 400px;
   border-left: 2px solid #00ffff;
   margin-left: 40px;
+  overflow: hidden;
 }
 
 .timeline-block {