fix: showing current lap data in lap analysis panel (before lap is completed) - now only displays completed laps

.gitignore

@@ -23,3 +23,4 @@ backend/data/sessions/
 
 # Planning & internal docs
 /docs/
+.next/

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to F1 Replay Timing will be documented in this file.
 
+## 1.3.2.1
+
+### Fixes
+- **Lap analysis lap number** — fixed showing incomplete current lap data; now only displays completed laps
+- **Mobile lap analysis scroll** — section is now scrollable on mobile
+
+---
+
 ## 1.3.2
 
 ### Improvements

frontend/src/app/replay/[year]/[round]/page.tsx

@@ -866,7 +866,7 @@ export default function ReplayPage() {
             {/* Lap Analysis Panel - desktop only, left of leaderboard */}
             {!isMobile && isRace && lapAnalysisOpen && lapsResponse?.laps && (
               <div className="w-[280px] h-full border-r border-f1-border overflow-hidden flex-shrink-0">
-                <LapAnalysisPanel laps={lapsResponse.laps} drivers={drivers} currentLap={replay.frame?.lap || 0} onClose={() => closePanel(() => setLapAnalysisOpen(false))} />
+                <LapAnalysisPanel laps={lapsResponse.laps} drivers={drivers} currentLap={Math.max(0, (replay.frame?.lap || 0) - 1)} onClose={() => closePanel(() => setLapAnalysisOpen(false))} />
               </div>
             )}
 
@@ -920,8 +920,8 @@ export default function ReplayPage() {
               </svg>
             </button>
             {mobileLapAnalysisOpen && (
-              <div className="bg-f1-card">
-                <LapAnalysisPanel laps={lapsResponse.laps} drivers={drivers} currentLap={replay.frame?.lap || 0} />
+              <div className="bg-f1-card max-h-[60vh] overflow-y-auto">
+                <LapAnalysisPanel laps={lapsResponse.laps} drivers={drivers} currentLap={Math.max(0, (replay.frame?.lap || 0) - 1)} />
               </div>
             )}
           </div>

frontend/src/components/LapAnalysisPanel.tsx

@@ -118,6 +118,12 @@ const LAP_RANGES = [
 export default function LapAnalysisPanel({ laps, drivers, currentLap, onClose }: Props) {
   const [selectedDrivers, setSelectedDrivers] = useState<[string | null, string | null]>([null, null]);
   const [lapRange, setLapRange] = useState<number>(0); // 0 = all
+  const [lapOrder, setLapOrder] = useState<"asc" | "desc">(() => {
+    if (typeof window !== "undefined") {
+      return (localStorage.getItem("f1replay_lap_order") as "asc" | "desc") || "asc";
+    }
+    return "asc";
+  });
 
   const sortedDrivers = useMemo(
     () => [...drivers].sort((a, b) => (a.position ?? 999) - (b.position ?? 999)),
@@ -499,7 +505,20 @@ export default function LapAnalysisPanel({ laps, drivers, currentLap, onClose }:
             <div className="px-3 pb-2">
               {/* Header row */}
               <div className="flex items-center gap-1 py-1 border-b border-f1-border">
-                <span className="w-8 text-[9px] font-bold text-f1-muted">LAP</span>
+                <button
+                  onClick={() => {
+                    const next = lapOrder === "asc" ? "desc" : "asc";
+                    setLapOrder(next);
+                    try { localStorage.setItem("f1replay_lap_order", next); } catch {}
+                  }}
+                  className="w-8 text-[9px] font-bold text-f1-muted hover:text-white transition-colors flex items-center gap-0.5"
+                  title={lapOrder === "asc" ? "Show latest first" : "Show earliest first"}
+                >
+                  LAP
+                  <svg className={`w-2.5 h-2.5 transition-transform ${lapOrder === "desc" ? "rotate-180" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
                 {activeDrivers.map((abbr) => (
                   <div key={abbr} className="flex-1 flex items-center gap-1">
                     <span
@@ -524,7 +543,10 @@ export default function LapAnalysisPanel({ laps, drivers, currentLap, onClose }:
                   }),
                 );
                 const rows = [];
-                for (let lap = 1; lap <= maxLap; lap++) {
+                const startLap = lapOrder === "desc" ? maxLap : 1;
+                const endLap = lapOrder === "desc" ? 1 : maxLap;
+                const step = lapOrder === "desc" ? -1 : 1;
+                for (let lap = startLap; lapOrder === "desc" ? lap >= endLap : lap <= endLap; lap += step) {
                   rows.push(
                     <div
                       key={lap}