From eb31e86d4f407845c498c92ad6aef5dadde38dcd Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Wed, 8 Jul 2026 23:23:28 -0400
Subject: [PATCH] feat(studio): lanes and ruler span the full timeline width at
 any zoom

When the composition is narrower than the panel (zoomed out) the track
lanes, ruler bar, and context header now fill the whole timeline instead
of stopping at the content width and leaving a flat dark void. Content
stays in composition coordinates, so ticks, clips, and the playhead are
unaffected.
---
 packages/studio/src/player/components/TimelineCanvas.tsx   | 7 ++++++-
 .../src/player/components/TimelineLayerGroupHeader.tsx     | 6 +++++-
 packages/studio/src/player/components/TimelineRuler.tsx    | 6 ++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/studio/src/player/components/TimelineCanvas.tsx b/packages/studio/src/player/components/TimelineCanvas.tsx
index 196678b3f..d5e4f651e 100644
--- a/packages/studio/src/player/components/TimelineCanvas.tsx
+++ b/packages/studio/src/player/components/TimelineCanvas.tsx
@@ -204,7 +204,12 @@ export const TimelineCanvas = memo(function TimelineCanvas({
     draggedClip?.started === true ? (draggedClip.previewStackingReorder?.placement ?? null) : null;
 
   return (
-    <div className="relative" style={{ height: totalH, width: GUTTER + trackContentWidth }}>
+    // minWidth:100% makes the lanes and ruler fill the panel when the composition
+    // is narrower than the viewport (zoomed out); content stays in time coords.
+    <div
+      className="relative"
+      style={{ height: totalH, width: GUTTER + trackContentWidth, minWidth: "100%" }}
+    >
       <TimelineRuler
         major={major}
         minor={minor}
diff --git a/packages/studio/src/player/components/TimelineLayerGroupHeader.tsx b/packages/studio/src/player/components/TimelineLayerGroupHeader.tsx
index 6f1a40753..569b15720 100644
--- a/packages/studio/src/player/components/TimelineLayerGroupHeader.tsx
+++ b/packages/studio/src/player/components/TimelineLayerGroupHeader.tsx
@@ -46,7 +46,11 @@ export function TimelineLayerGroupHeader({
       className="relative"
       style={{
         height: TIMELINE_LAYER_GROUP_HEADER_H,
-        width: GUTTER + trackContentWidth,
+        // Fill the full canvas width (min 100% of the panel) so the context
+        // header spans the timeline at any zoom; minWidth preserves the intrinsic
+        // composition width when zoomed in and scrolling.
+        width: "100%",
+        minWidth: GUTTER + trackContentWidth,
         background: theme.gutterBackground,
         borderBottom: `1px solid ${theme.rowBorder}`,
       }}
diff --git a/packages/studio/src/player/components/TimelineRuler.tsx b/packages/studio/src/player/components/TimelineRuler.tsx
index 42491649f..73416fd00 100644
--- a/packages/studio/src/player/components/TimelineRuler.tsx
+++ b/packages/studio/src/player/components/TimelineRuler.tsx
@@ -79,13 +79,15 @@ export const TimelineRuler = memo(function TimelineRuler({
           })}
       </svg>
 
-      {/* Ruler */}
+      {/* Ruler. The bar fills the full panel width (canvas is min 100% wide);
+          calc(100% - GUTTER) equals trackContentWidth when zoomed in and extends
+          past the content when zoomed out. Ticks stay at composition coordinates. */}
       <div
         className="relative overflow-hidden"
         style={{
           height: RULER_H,
           marginLeft: GUTTER,
-          width: trackContentWidth,
+          width: `calc(100% - ${GUTTER}px)`,
           background: theme.gutterBackground,
           borderBottom: `1px solid ${theme.rulerBorder}`,
         }}