diff --git a/script.js b/script.js
index 5aa38a4..9066a2c 100644
--- a/script.js
+++ b/script.js
@@ -743,17 +743,20 @@ function showEonstripDetail(index, startCob) {
         const width = 100 / (columns.length || 1);
         events.forEach(ev=>{
             const left = ev.col * width;
-            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 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';
+                const h = (displayEnd - displayStart) * 100;
+                elem.style.height = (h > 0 ? h : 0) + '%';
             } else {
-                elem.className='event-line';
+                elem.className = 'event-line';
             }
-            elem.style.top=(ev.start*100)+'%';
-            elem.style.left=left+'%';
-            elem.style.width=`calc(${width}% - 2px)`;
-            elem.textContent=ev.label;
+            elem.style.top = (displayStart * 100) + '%';
+            elem.style.left = left + '%';
+            elem.style.width = `calc(${width}% - 2px)`;
+            elem.textContent = ev.label;
             timeline.appendChild(elem);
         });
     }
diff --git a/style.css b/style.css
index cc9dfd7..c71f8fe 100644
--- a/style.css
+++ b/style.css
@@ -403,6 +403,7 @@
   height: 400px;
   border-left: 2px solid #00ffff;
   margin-left: 40px;
+  overflow: hidden;
 }
 
 .timeline-block {