feat(workout-session): add auto-scroll functionality to current exercise and improve timer positioning for better user experience (#57)

src/features/workout-session/ui/workout-session-sets.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { Check, Play, ArrowRight, Trophy as TrophyIcon, Plus, Hourglass } from "lucide-react";
@@ -34,6 +34,34 @@ export function WorkoutSessionSets({
   const [videoModal, setVideoModal] = useState<{ open: boolean; exerciseId?: string }>({ open: false });
   const { syncSessions } = useSyncWorkoutSessions();
 
+  // auto-scroll to current exercise when index changes
+  useEffect(() => {
+    if (session && currentExerciseIndex >= 0) {
+      const exerciseElement = document.getElementById(`exercise-${currentExerciseIndex}`);
+      if (exerciseElement) {
+        const scrollContainer = exerciseElement.closest(".overflow-auto");
+
+        if (scrollContainer) {
+          const containerRect = scrollContainer.getBoundingClientRect();
+          const elementRect = exerciseElement.getBoundingClientRect();
+          const offset = 10;
+
+          const scrollTop = scrollContainer.scrollTop + elementRect.top - containerRect.top - offset;
+
+          scrollContainer.scrollTo({
+            top: scrollTop,
+            behavior: "smooth",
+          });
+        } else {
+          exerciseElement.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          });
+        }
+      }
+    }
+  }, [currentExerciseIndex, session]);
+
   if (showCongrats) {
     return (
       <div className="flex flex-col items-center justify-center py-16 h-full">
@@ -98,6 +126,7 @@ export function WorkoutSessionSets({
           return (
             <li
               className={`mb-8 ml-4 ${idx !== currentExerciseIndex ? "cursor-pointer hover:opacity-80" : ""}`}
+              id={`exercise-${idx}`}
               key={ex.id}
               onClick={() => handleExerciseClick(idx)}
             >

src/features/workout-session/ui/workout-session-timer.tsx

@@ -23,7 +23,7 @@ export function WorkoutSessionTimer() {
   }
 
   return (
-    <div className="absolute bottom-16 left-0 right-4 flex justify-center mb-3">
+    <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 mb-3">
       <div className="bg-white dark:bg-slate-900 rounded-full px-6 py-4 border border-slate-200 dark:border-slate-700 shadow-lg backdrop-blur-sm">
         <div className="flex items-center justify-between gap-4">
           {/* Timer display */}