fix draggable element pixel alignment (#10708)

Author: hawkeye217

web/src/components/timeline/ReviewTimeline.tsx

@@ -259,7 +259,7 @@ export function ReviewTimeline({
                 ></div>
               </div>
               <div
-                className={`absolute h-1 w-full bg-destructive ${isDragging && isMobile && draggableElementType == "handlebar" ? "top-1" : "top-1/2 transform -translate-y-1/2"}`}
+                className={`absolute h-[4px] w-full bg-destructive ${isDragging && isMobile && draggableElementType == "handlebar" ? "top-1" : "top-1/2 transform -translate-y-1/2"}`}
               ></div>
             </div>
           </div>
@@ -293,7 +293,7 @@ export function ReviewTimeline({
                   ></div>
                 </div>
                 <div
-                  className={`absolute h-1 w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_end" ? "top-0" : "top-1/2 transform -translate-y-1/2"}`}
+                  className={`absolute h-[4px] w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_end" ? "top-0" : "top-1/2 transform -translate-y-1/2"}`}
                 ></div>
               </div>
             </div>
@@ -318,7 +318,7 @@ export function ReviewTimeline({
                 }`}
               >
                 <div
-                  className={`absolute h-1 w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_start" ? "top-[12px]" : "top-1/2 transform -translate-y-1/2"}`}
+                  className={`absolute h-[4px] w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_start" ? "top-[12px]" : "top-1/2 transform -translate-y-1/2"}`}
                 ></div>
                 <div
                   className={`bg-selected mt-4 mx-auto ${

web/src/hooks/use-draggable-element.ts

@@ -382,12 +382,12 @@ function useDraggableElement({
         const timelineRect = timelineRef.current.getBoundingClientRect();
         const timelineTopAbsolute = timelineRect.top;
         const rect = segmentElement.getBoundingClientRect();
-        const segmentTop =
-          rect.top + scrolled - timelineTopAbsolute - segmentHeight / 2;
+        const segmentTop = rect.top + scrolled - timelineTopAbsolute;
         const offset =
           ((draggableElementTime - alignedSegmentTime) / segmentDuration) *
           segmentHeight;
-        const newElementPosition = segmentTop - offset;
+        // subtract half the height of the handlebar cross bar (4px) for pixel perfection
+        const newElementPosition = segmentTop - offset - 2;
 
         updateDraggableElementPosition(
           newElementPosition,