From e554dc9973aeffcac0ec83dcf606e42c379d7e05 Mon Sep 17 00:00:00 2001
From: Ethanfel <ethan.fel@ts-pc.fr>
Date: Wed, 25 Feb 2026 00:35:32 +0100
Subject: [PATCH] Center timeline bar at 80% width with rounded corners

Replace full-width bar with centered floating pill that clears both the
left sidebar and right controls. Uses left/right: 10% with border-radius
and a small bottom offset. Icons remain left-aligned inside the track.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 js/snapshot_manager.js | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/js/snapshot_manager.js b/js/snapshot_manager.js
index bdb4d61..fa50440 100644
--- a/js/snapshot_manager.js
+++ b/js/snapshot_manager.js
@@ -882,12 +882,13 @@ const CSS = `
 }
 .snap-timeline {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    bottom: 4px;
+    left: 10%;
+    right: 10%;
     height: 32px;
     background: rgba(15, 23, 42, 0.85);
-    border-top: 1px solid var(--border-color, #334155);
+    border: 1px solid var(--border-color, #334155);
+    border-radius: 8px;
     display: flex;
     align-items: center;
     padding: 0 16px;
@@ -1441,16 +1442,6 @@ function buildTimeline() {
     bar.appendChild(track);
     bar.appendChild(snapBtn);
 
-    // Offset timeline to avoid floating sidebar overlap
-    const leftToolbar = document.querySelector(".comfyui-body-left .side-tool-bar-container");
-    const rightToolbar = document.querySelector(".comfyui-body-right .side-tool-bar-container");
-    if (leftToolbar && !leftToolbar.classList.contains("connected-sidebar")) {
-        bar.style.paddingLeft = "calc(var(--sidebar-width, 48px) + 16px)";
-    }
-    if (rightToolbar && !rightToolbar.classList.contains("connected-sidebar")) {
-        bar.style.paddingRight = "calc(var(--sidebar-width, 48px) + 16px)";
-    }
-
     canvasParent.appendChild(bar);
     timelineEl = bar;