From 98a1e6ee22292decc11a4c19678275cb65c6d2c1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 27 Mar 2024 08:21:38 -0500
Subject: [PATCH] fix draggable element pixel alignment (#10708)

---
 web/src/components/timeline/ReviewTimeline.tsx | 6 +++---
 web/src/hooks/use-draggable-element.ts         | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index 8d6b59471..35dcd6c8c 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/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 ${
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index eb32ce2bb..24b143e93 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/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,