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/MotionSegment.tsx

@@ -244,21 +244,27 @@ export function MotionSegment({
         </div>
       </div>
 
-      {severity.map((severityValue: number, index: number) => (
-        <React.Fragment key={index}>
-          <div className="absolute right-0 h-2 z-10">
-            <div
-              key={`${segmentKey}_${index}_secondary_data`}
-              className={`
-                  w-1 h-2 bg-gradient-to-r
-                  ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
-                  ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
-                  ${severityColors[severityValue]}
-                `}
-            ></div>
-          </div>
-        </React.Fragment>
-      ))}
+      {severity.map((severityValue: number, index: number) => {
+        if (severityValue > 1) {
+          return (
+            <React.Fragment key={index}>
+              <div className="absolute right-0 h-2 z-10">
+                <div
+                  key={`${segmentKey}_${index}_secondary_data`}
+                  className={`
+              w-1 h-2 bg-gradient-to-r
+              ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
+              ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
+              ${severityColors[severityValue]}
+            `}
+                ></div>
+              </div>
+            </React.Fragment>
+          );
+        } else {
+          return null;
+        }
+      })}
     </div>
   );
 }