Merge pull request #62 from ok2/codex/fix-visibility-of-event-labels-and-line-thickness

script.js

@@ -745,18 +745,31 @@ function showEonstripDetail(index, startCob) {
             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');
+            const elem = document.createElement('div');
             if (ev.end > ev.start) {
                 elem.className = 'event-box';
                 const h = (displayEnd - displayStart) * 100;
+                if (h < 2) {
+                    elem.classList.add('small-event');
+                    elem.style.height = '4px';
+                } else {
                     elem.style.height = (h > 0 ? h : 0) + '%';
+                }
             } else {
                 elem.className = 'event-line';
             }
             elem.style.top = (displayStart * 100) + '%';
             elem.style.left = left + '%';
             elem.style.width = `calc(${width}% - 2px)`;
+
+            if (elem.classList.contains('small-event') || elem.className === 'event-line') {
+                const label = document.createElement('span');
+                label.className = 'event-label';
+                label.textContent = ev.label;
+                elem.appendChild(label);
+            } else {
                 elem.textContent = ev.label;
+            }
             timeline.appendChild(elem);
         });
     }

style.css

@@ -430,8 +430,30 @@
 }
 
 .event-line {
-  height: 2px;
+  height: 4px;
   padding: 0;
+  overflow: visible;
+}
+
+.event-box.small-event {
+  overflow: visible;
+  padding: 0;
+}
+
+.event-line .event-label,
+.event-box.small-event .event-label {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 4px;
+  background: rgba(255,0,255,0.3);
+  border: 1px solid rgba(0,255,255,0.5);
+  border-radius: 4px;
+  padding: 2px 4px;
+  white-space: nowrap;
+  color: #fff;
+  font-size: 0.7em;
 }
 
 /* Layout combining current time and analog clock */