From 4ef3a605dd0d0355236f2dc1bc96d2b04b7cb0c4 Mon Sep 17 00:00:00 2001
From: Gykes <24581046+Gykes@users.noreply.github.com>
Date: Wed, 26 Nov 2025 21:57:57 -0600
Subject: [PATCH] Bugfix: Update Markers to % Base Calc (#6323)

* update to % base calc
* add min-width
---
 ui/v2.5/src/components/ScenePlayer/markers.ts | 25 +++++++++++--------
 .../src/components/ScenePlayer/styles.scss    |  1 +
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/markers.ts b/ui/v2.5/src/components/ScenePlayer/markers.ts
index 6215f7f47..55e0c7cd2 100644
--- a/ui/v2.5/src/components/ScenePlayer/markers.ts
+++ b/ui/v2.5/src/components/ScenePlayer/markers.ts
@@ -142,18 +142,23 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
     const rangeDiv = videojs.dom.createEl("div") as HTMLDivElement;
     rangeDiv.className = "vjs-marker-range";
 
-    // start/end percent is relative to the parent element, which is the vjs-progress-control
-    // vjs-progress-control has 15px margins on each side
-    const left = seekBar.clientWidth * (marker.seconds / duration) + 15;
+    // Use percentage-based positioning for proper scaling in fullscreen mode
+    // The range marker is inside vjs-progress-control, but needs to align with
+    // vjs-progress-holder which has 15px margins on each side.
+    // We use calc() to combine percentage positioning with the fixed margin offset.
+    const startPercent = (marker.seconds / duration) * 100;
+    const widthPercent =
+      ((marker.end_seconds - marker.seconds) / duration) * 100;
 
-    // minimum width of 8px
-    const width = Math.max(
-      seekBar.clientWidth * ((marker.end_seconds - marker.seconds) / duration),
-      8
-    );
+    // left: 15px margin + percentage of the progress holder width
+    // Since progress-holder has margin: 0 15px, we need calc(15px + X% of remaining width)
+    // The progress-holder width is (100% - 30px), so the actual left position is:
+    // 15px + startPercent% * (100% - 30px) = 15px + startPercent% * 100% - startPercent% * 30px
+    rangeDiv.style.left = `calc(15px + ${startPercent}% - ${
+      startPercent * 0.3
+    }px)`;
 
-    rangeDiv.style.left = `${left}px`;
-    rangeDiv.style.width = `${width}px`;
+    rangeDiv.style.width = `calc(${widthPercent}% - ${widthPercent * 0.3}px)`;
     rangeDiv.style.bottom = `${layer * this.layerHeight}px`; // Adjust height based on layer
     rangeDiv.style.display = "none"; // Initially hidden
 
diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss
index 95b1df8c7..0e8041071 100644
--- a/ui/v2.5/src/components/ScenePlayer/styles.scss
+++ b/ui/v2.5/src/components/ScenePlayer/styles.scss
@@ -271,6 +271,7 @@ $sceneTabWidth: 450px;
     border-radius: 2px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     height: 8px;
+    min-width: 8px;
     position: absolute;
     transform: translateY(-28px);
     transition: none;