From 88c37b566a2249b9bcac4737912e147d4d557bf0 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Fri, 20 Jun 2025 07:47:31 +0200
Subject: [PATCH] Fix detail view labels for small events

---
 script.js | 19 ++++++++++++++++---
 style.css | 24 +++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/script.js b/script.js
index 9066a2c..7ee5018 100644
--- a/script.js
+++ b/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;
-                elem.style.height = (h > 0 ? h : 0) + '%';
+                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)`;
-            elem.textContent = ev.label;
+
+            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);
         });
     }
diff --git a/style.css b/style.css
index c71f8fe..1fd4e0d 100644
--- a/style.css
+++ b/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 */