Tweak duration pill precision slightly

Trying to reduce needlessly precise values that look weird, and
aggressive churn of values when watching pending numbers tick upwards.

Author: pimterry

src/components/common/duration-pill.tsx

@@ -6,8 +6,8 @@ import { observableClock } from '../../util/observable';
 
 import { Pill } from './pill';
 
-function sigFig(num: number, figs: number): number {
-    return parseFloat(num.toFixed(figs));
+function sigFig(num: number, figs: number): string {
+    return num.toFixed(figs);
 }
 
 type DurationPillProps = { className?: string } & (
@@ -42,9 +42,10 @@ export const DurationPill = observer((p: DurationPillProps) => {
     if (duration === undefined) return null;
 
     return <Pill className={p.className}>{
-        duration < 100 ? sigFig(duration, 2) + 'ms' : // 22.34ms
-        duration < 1000 ? sigFig(duration, 1) + 'ms' : // 999.5ms
-        duration < 10000 ? sigFig(duration / 1000, 3) + ' seconds' : // 3.045 seconds
-        sigFig(duration / 1000, 1) + ' seconds' // 11.2 seconds
+        duration < 100 ? sigFig(duration, 1) + 'ms' : // 22.3ms
+        duration < 1000 ? sigFig(duration, 0) + 'ms' : // 999ms
+        duration < 5000 ? sigFig(duration / 1000, 2) + ' seconds' : // 3.04 seconds
+        duration < 9900 ? sigFig(duration / 1000, 1) + ' seconds' : // 8.2 seconds
+        sigFig(duration / 1000, 0) + ' seconds' // 30 seconds
     }</Pill>;
 });