From 84d206c01e1ae02d52e30e82982971436e98828c Mon Sep 17 00:00:00 2001
From: creotove <creotove@gmail.com>
Date: Wed, 25 Jun 2025 08:36:27 +0530
Subject: [PATCH 1/2] Fix: [BUG] buttons jitter left and right #67

---
 apps/web/src/components/editor/timeline.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 0d02160..81b9974 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -602,9 +602,10 @@ export function Timeline() {
           <div className="w-px h-6 bg-border mx-1" />
 
           {/* Time Display */}
-          <div className="text-xs text-muted-foreground font-mono px-2">
-            {Math.floor(currentTime * 10) / 10}s /{" "}
-            {Math.floor(duration * 10) / 10}s
+          <div className="text-xs text-muted-foreground font-mono px-2"
+            style={{ minWidth: '12ch', textAlign: 'right' }}
+            >
+              {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
           </div>
 
           <div className="w-px h-6 bg-border mx-1" />

From 7de09adce696442b0ba536bd3895f335246c744b Mon Sep 17 00:00:00 2001
From: creotove <creotove@gmail.com>
Date: Wed, 25 Jun 2025 08:51:17 +0530
Subject: [PATCH 2/2] Fix: unwanted seperator when there is a clip on track.

---
 apps/web/src/components/editor/timeline.tsx | 53 +++++++++++----------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 81b9974..6c39c89 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -603,38 +603,39 @@ export function Timeline() {
 
           {/* Time Display */}
           <div className="text-xs text-muted-foreground font-mono px-2"
-            style={{ minWidth: '12ch', textAlign: 'right' }}
+            style={{ minWidth: '18ch', textAlign: 'center' }}
             >
               {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
           </div>
 
-          <div className="w-px h-6 bg-border mx-1" />
-
           {/* Test Clip Button - for debugging */}
           {tracks.length === 0 && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    const trackId = addTrack("video");
-                    addClipToTrack(trackId, {
-                      mediaId: "test",
-                      name: "Test Clip",
-                      duration: 5,
-                      startTime: 0,
-                      trimStart: 0,
-                      trimEnd: 0,
-                    });
-                  }}
-                  className="text-xs"
-                >
-                  Add Test Clip
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Add a test clip to try playback</TooltipContent>
-            </Tooltip>
+            <>
+              <div className="w-px h-6 bg-border mx-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const trackId = addTrack("video");
+                      addClipToTrack(trackId, {
+                        mediaId: "test",
+                        name: "Test Clip",
+                        duration: 5,
+                        startTime: 0,
+                        trimStart: 0,
+                        trimEnd: 0,
+                      });
+                    }}
+                    className="text-xs"
+                  >
+                    Add Test Clip
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Add a test clip to try playback</TooltipContent>
+              </Tooltip>
+            </>
           )}
 
           <div className="w-px h-6 bg-border mx-1" />