UI tweaks (#10402)

* add minor ticks to timeline

* don't display motion events on veritcal bars on motion timeline

* color tweaks and spacing on config editor

* 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 } =