From a9d8f753d47e815f453691a67d5064835eb833e1 Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Fri, 22 May 2026 14:22:36 +0200
Subject: [PATCH] fix(chapters): size chapter ticks to the slider track

---
 components/casting/player/CastPlayerProgressBar.tsx | 6 +++++-
 components/chapters/ChapterTicks.tsx                | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/casting/player/CastPlayerProgressBar.tsx b/components/casting/player/CastPlayerProgressBar.tsx
index f811fff79..5ff5738ce 100644
--- a/components/casting/player/CastPlayerProgressBar.tsx
+++ b/components/casting/player/CastPlayerProgressBar.tsx
@@ -131,7 +131,11 @@ export function CastPlayerProgressBar({
           thumbWidth={16}
           panHitSlop={{ top: 12, bottom: 12, left: 10, right: 10 }}
         />
-        <ChapterTicks chapters={chapters} durationMs={duration * 1000} />
+        <ChapterTicks
+          chapters={chapters}
+          durationMs={duration * 1000}
+          height={4}
+        />
         {__DEV__ && DEBUG_TOUCH_ZONES && (
           <View
             pointerEvents='none'
diff --git a/components/chapters/ChapterTicks.tsx b/components/chapters/ChapterTicks.tsx
index c83de0b42..3d0a2a3d4 100644
--- a/components/chapters/ChapterTicks.tsx
+++ b/components/chapters/ChapterTicks.tsx
@@ -14,12 +14,15 @@ interface ChapterTicksProps {
   durationMs: number;
   /** Tick colour. */
   color?: string;
+  /** Tick height in px — slightly less than the slider track thickness. */
+  height?: number;
 }
 
 export function ChapterTicks({
   chapters,
   durationMs,
   color = "#fff",
+  height = 6,
 }: ChapterTicksProps) {
   const markers = chapterMarkers(chapters, durationMs);
   // One chapter (typically a single marker at 0) is not worth marking.
@@ -36,8 +39,9 @@ export function ChapterTicks({
           style={{
             position: "absolute",
             left: `${marker.percent}%`,
-            top: "25%",
-            height: "50%",
+            top: "50%",
+            marginTop: -height / 2,
+            height,
             width: 2,
             backgroundColor: color,
           }}