From a627a79f47d3c0953ab7155d65f3c7443577a5dd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 28 Oct 2025 22:29:54 -0500
Subject: [PATCH] fixes

---
 web/src/components/timeline/MotionSegment.tsx  | 18 +++++++++---------
 .../timeline/VirtualizedMotionSegments.tsx     |  5 +++++
 web/src/views/recording/RecordingView.tsx      |  2 +-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 511853262..4d70aaa66 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -120,16 +120,16 @@ export function MotionSegment({
     return showMinimap && segmentTime === alignedMinimapEndTime;
   }, [showMinimap, segmentTime, alignedMinimapEndTime]);
 
-  // Top border: current segment has no recording, but previous segment has recordings
+  // Bottom border: current segment HAS recording, but next segment (below/earlier) has NO recording
   const isFirstSegmentWithoutRecording = useMemo(() => {
-    return hasRecording === false && prevIsNoRecording === false;
-  }, [hasRecording, prevIsNoRecording]);
-
-  // Bottom border: current segment has no recording, but next segment has recordings
-  const isLastSegmentWithoutRecording = useMemo(() => {
-    return hasRecording === false && nextIsNoRecording === false;
+    return hasRecording === true && nextIsNoRecording === true;
   }, [hasRecording, nextIsNoRecording]);
 
+  // Top border: current segment HAS recording, but prev segment (above/later) has NO recording
+  const isLastSegmentWithoutRecording = useMemo(() => {
+    return hasRecording === true && prevIsNoRecording === true;
+  }, [hasRecording, prevIsNoRecording]);
+
   const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -198,10 +198,10 @@ export function MotionSegment({
           onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
         >
           {isFirstSegmentWithoutRecording && (
-            <div className="absolute -top-[1px] left-0 right-0 h-[1px] bg-primary-variant/50" />
+            <div className="absolute bottom-[0px] left-0 right-0 h-[1px] bg-primary-variant/50" />
           )}
           {isLastSegmentWithoutRecording && (
-            <div className="absolute bottom-[0px] left-0 right-0 h-[1px] bg-primary-variant/50" />
+            <div className="absolute -top-[1px] left-0 right-0 h-[1px] bg-primary-variant/50" />
           )}
           {!motionOnly && (
             <>
diff --git a/web/src/components/timeline/VirtualizedMotionSegments.tsx b/web/src/components/timeline/VirtualizedMotionSegments.tsx
index 15641896d..9d6b3a6f1 100644
--- a/web/src/components/timeline/VirtualizedMotionSegments.tsx
+++ b/web/src/components/timeline/VirtualizedMotionSegments.tsx
@@ -158,12 +158,17 @@ export const VirtualizedMotionSegments = forwardRef<
 
         const hasRecording = getRecordingAvailability(segmentTime);
 
+        // Check if previous and next segments have recordings
+        // This is important because in motionOnly mode, the segments array is filtered
         const prevSegmentTime = segmentTime + segmentDuration;
         const nextSegmentTime = segmentTime - segmentDuration;
 
         const prevHasRecording = getRecordingAvailability(prevSegmentTime);
         const nextHasRecording = getRecordingAvailability(nextSegmentTime);
 
+        // Check if prev/next segments have no recording available
+        // Note: We only check hasRecording, not motion values, because segments can have
+        // recordings available but no motion (eg, start of a recording before motion begins)
         const prevIsNoRecording = prevHasRecording === false;
         const nextIsNoRecording = nextHasRecording === false;
 
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index 44a3d0aab..500a82ab6 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -924,7 +924,7 @@ function Timeline({
     {
       before: timeRange.before,
       after: timeRange.after,
-      scale: Math.round(zoomSettings.segmentDuration / 2),
+      scale: Math.round(zoomSettings.segmentDuration),
       cameras: mainCamera,
     },
   ]);