pad start and end of timeline to ensure handlebar is always visible

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -51,8 +51,8 @@ export function MotionReviewTimeline({
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const timelineDuration = useMemo(
-    () => timelineStart - timelineEnd,
-    [timelineEnd, timelineStart],
+    () => timelineStart - timelineEnd + 4 * segmentDuration,
+    [timelineEnd, timelineStart, segmentDuration],
   );
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
@@ -61,8 +61,8 @@ export function MotionReviewTimeline({
   );
 
   const timelineStartAligned = useMemo(
-    () => alignStartDateToTimeline(timelineStart),
-    [timelineStart, alignStartDateToTimeline],
+    () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,
+    [timelineStart, alignStartDateToTimeline, segmentDuration],
   );
 
   const { handleMouseDown, handleMouseUp, handleMouseMove } =

web/src/components/timeline/ReviewTimeline.tsx

@@ -48,7 +48,11 @@ export function ReviewTimeline({
         isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
       }`}
     >
-      <div className="flex flex-col">{children}</div>
+      <div className="flex flex-col relative">
+        <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
+        <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
+        {children}
+      </div>
       {showHandlebar && (
         <div
           className="absolute left-0 top-0 z-20 w-full"

web/src/hooks/use-handle-dragging.ts

@@ -195,8 +195,8 @@ function useDraggableHandler({
           segmentHeight * (timelineDuration / segmentDuration) -
             segmentHeight * 2,
           Math.max(
-            // start of timeline
-            segmentHeight + scrolled,
+            // start of timeline - 2 segments added for handlebar visibility
+            segmentHeight * 2 + scrolled,
             // current Y position
             clientYPosition -
               timelineTop +