From f6f1502f1a8f09c606471b6d8b6384271a234350 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Fri, 20 Jun 2025 08:41:44 +0200
Subject: [PATCH] Adjust detail view timeline layout and auto-update

---
 script.js | 34 +++++++++++++++++++++++-----------
 style.css |  7 ++++---
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/script.js b/script.js
index 9dfebd5..a0fc9b0 100644
--- a/script.js
+++ b/script.js
@@ -177,6 +177,7 @@ function updateCurrentTime() {
     } else {
         updateTimeBreakdown(cobiets);
     }
+    updateDetailCurrentTime();
 }
 
 function updateTimeBreakdown(cobiets) {
@@ -701,15 +702,11 @@ function showEonstripDetail(index, startCob) {
         timeline.appendChild(block);
     }
 
-    let markerCob = manualMode ? manualCobiets : toCobiets(new Date());
-    const rel = (markerCob - startCob) / COBIE_UNITS.eonstrip;
-    if (rel >= 0 && rel <= 1) {
-        const line = document.createElement('div');
-        line.className = 'current-time-line';
-        line.style.top = (rel * 100) + '%';
-        line.textContent = formatCobieTimestamp(markerCob);
-        timeline.appendChild(line);
-    }
+    const line = document.createElement('div');
+    line.className = 'current-time-line';
+    line.id = 'detailCurrentTime';
+    timeline.appendChild(line);
+    updateDetailCurrentTime();
 
     if (Array.isArray(window.SPECIAL_EVENTS)) {
         const events = [];
@@ -777,7 +774,7 @@ function showEonstripDetail(index, startCob) {
                 elem.className = 'event-line';
             }
             elem.style.top = (displayStart * 100) + '%';
-            elem.style.left = left + '%';
+            elem.style.left = `calc(var(--scale-width) + ${left}%)`;
             elem.style.width = `calc(${width}% - 2px)`;
 
             if (elem.classList.contains('small-event') || elem.className === 'event-line') {
@@ -810,11 +807,26 @@ function showEonstripDetail(index, startCob) {
                 `End: ${endStr}<br>` +
                 `${startDate} – ${endDate}`;
             elem.appendChild(tooltip);
-            timeline.appendChild(elem);
+        timeline.appendChild(elem);
         });
     }
 }
 
+function updateDetailCurrentTime() {
+    if (currentDetailCob === null) return;
+    const line = document.getElementById('detailCurrentTime');
+    if (!line) return;
+    const nowCob = manualMode ? manualCobiets : toCobiets(new Date());
+    const rel = (nowCob - currentDetailCob) / COBIE_UNITS.eonstrip;
+    if (rel >= 0 && rel <= 1) {
+        line.style.display = 'block';
+        line.style.top = (rel * 100) + '%';
+        line.textContent = formatCobieTimestamp(nowCob);
+    } else {
+        line.style.display = 'none';
+    }
+}
+
 function detailPrev() {
     if (currentDetailCob === null) return;
     showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
diff --git a/style.css b/style.css
index 0b4c60e..362d053 100644
--- a/style.css
+++ b/style.css
@@ -400,6 +400,7 @@
 
 .detail-timeline {
   position: relative;
+  --scale-width: 24px;
   height: 400px;
   border-left: 3px solid #00ffff;
   margin-right: 40px;
@@ -425,8 +426,8 @@
 
 .current-time-line {
   position: absolute;
-  left: 0;
-  width: calc(100% + 40px);
+  left: var(--scale-width);
+  width: calc(100% + 40px - var(--scale-width));
   border-top: 2px solid #ff00ff;
   color: #ff00ff;
   font-size: 0.9em;
@@ -439,7 +440,7 @@
 
 .event-box, .event-line {
   position: absolute;
-  left: -1px;
+  left: var(--scale-width);
   background: rgba(255,0,255,0.4);
   border: 1px solid rgba(0,255,255,0.7);
   border-radius: 4px;