fix: audio player

components/audio-player/floating-player.tsx

@@ -272,37 +272,44 @@ function ProgressBar({
   }, []);
 
   if (thin) {
-    // The wrapper is intentionally taller than the visible bar so the
-    // absolutely-positioned thumb has room to sit centred without
-    // poking out of the player card's overflow-hidden clip box.
+    // Layout, top to bottom:
     //
-    //   wrapper h-4 (16px)  ┐
-    //     visible bar h-1.5 │ centred via flex
-    //     thumb size-3      ┘ sits on the bar, absolutely positioned
+    //   outer  px-3 pt-2 — gutter so the size-3 thumb at progress=0%
+    //                     and 100% sits clear of the card's rounded
+    //                     corners (radius 16px → 6px thumb half-width
+    //                     fits inside the curve at every y).
+    //   inner  h-4       — the bar's click/touch target. The visible
+    //                     h-1.5 bar is centred inside it, and the
+    //                     thumb is absolute on top.
+    //
+    // The card's overflow-hidden stays — nothing protrudes past the
+    // gutter, so nothing gets clipped.
     return (
-      <div
-        ref={barRef}
-        className="relative w-full h-4 cursor-pointer shrink-0 flex items-center group/seek touch-none"
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        role="slider"
-        aria-label="Playback progress"
-        aria-valuemin={0}
-        aria-valuemax={duration || 0}
-        aria-valuenow={currentTime}
-        tabIndex={0}
-      >
-        <div className="w-full h-1.5 bg-white/15 overflow-hidden">
+      <div className="px-4 md:px-5 pt-2 shrink-0">
+        <div
+          ref={barRef}
+          className="relative w-full h-4 cursor-pointer flex items-center group/seek touch-none"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          role="slider"
+          aria-label="Playback progress"
+          aria-valuemin={0}
+          aria-valuemax={duration || 0}
+          aria-valuenow={currentTime}
+          tabIndex={0}
+        >
+          <div className="w-full h-1.5 bg-white/15 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-primary transition-[width] duration-100 ease-linear"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
           <div
-            className="h-full bg-primary transition-[width] duration-100 ease-linear"
-            style={{ width: `${progress}%` }}
+            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-3 bg-primary rounded-full ring-2 ring-[#1c1c1e] shadow-md pointer-events-none transition-transform group-hover/seek:scale-125"
+            style={{ left: `${progress}%` }}
           />
         </div>
-        <div
-          className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-3 bg-primary rounded-full ring-2 ring-[#1c1c1e] shadow-md pointer-events-none transition-transform group-hover/seek:scale-125"
-          style={{ left: `${progress}%` }}
-        />
       </div>
     );
   }