💄

src/components/time/Timeline.js

@@ -423,7 +423,7 @@ class Timeline extends React.Component {
                     .default_categories_label
                 }
               />
-              {app.timeline.dimensions.ticks == 1 && (
+              {app.timeline.dimensions.ticks === 1 && (
                 <Handles
                   dims={dims}
                   onMoveTime={(dir) => {

src/components/time/atoms/Handles.js

@@ -3,12 +3,11 @@ import React from "react";
 const TimelineHandles = ({ dims, onMoveTime }) => {
   const transform = "scale(1.5,1.5)";
   const size = 45;
+  const handleOffset = dims.contentHeight / 2;
   return (
     <g className="time-controls-inline">
       <g
-        transform={`translate(${dims.marginLeft - 20}, ${
-          dims.contentHeight - 10
-        })`}
+        transform={`translate(${dims.marginLeft - 20}, ${handleOffset})`}
         onClick={() => onMoveTime("backwards")}
       >
         <circle r={size} />
@@ -18,9 +17,9 @@ const TimelineHandles = ({ dims, onMoveTime }) => {
         />
       </g>
       <g
-        transform={`translate(${dims.width - dims.width_controls + 20}, ${
-          dims.contentHeight - 10
-        })`}
+        transform={`translate(${
+          dims.width - dims.width_controls + 20
+        }, ${handleOffset})`}
         onClick={() => onMoveTime("forward")}
       >
         <circle r={size} />