Adjust detail timeline layout and event label positions

script.js

@@ -783,6 +783,9 @@ function showEonstripDetail(index, startCob) {
             if (elem.classList.contains('small-event') || elem.className === 'event-line') {
                 const label = document.createElement('span');
                 label.className = 'event-label';
+                if (displayStart < 0.05) {
+                    label.classList.add('below');
+                }
                 label.textContent = ev.label;
                 elem.appendChild(label);
             } else {

style.css

@@ -402,17 +402,17 @@
   position: relative;
   height: 400px;
   border-left: 3px solid #00ffff;
-  margin-left: 40px;
-  overflow-x: visible;
-  overflow-y: hidden;
+  margin-right: 40px;
+  margin-left: 0;
+  overflow: visible;
 }
 
 .timeline-block {
   position: absolute;
-  left: -40px;
+  left: 0;
   width: calc(100% + 40px);
-  text-align: right;
-  padding-right: 4px;
+  text-align: left;
+  padding-left: 4px;
   border-top: 1px dashed rgba(0,255,255,0.5);
   color: #00ffff;
   font-size: 0.9em;
@@ -425,7 +425,7 @@
 
 .current-time-line {
   position: absolute;
-  left: -40px;
+  left: 0;
   width: calc(100% + 40px);
   border-top: 2px solid #ff00ff;
   color: #ff00ff;
@@ -481,6 +481,15 @@
   z-index: 4;
 }
 
+.event-line .event-label.below,
+.event-box.small-event .event-label.below {
+  bottom: auto;
+  top: 100%;
+  transform: translate(-50%, 2px);
+  margin-bottom: 0;
+  margin-top: 2px;
+}
+
 .event-box:hover .tooltip,
 .event-line:hover .tooltip {
   opacity: 1;