Fix some frontend display/quality/doc issues

frontend/src/components/TracePane.tsx

@@ -9,7 +9,8 @@ import type {
   RadioTraceResponse,
 } from '../types';
 import { CONTACT_TYPE_REPEATER } from '../types';
-import { calculateDistance, isValidLocation } from '../utils/pathUtils';
+import { calculateDistance, formatDistance, isValidLocation } from '../utils/pathUtils';
+import { useDistanceUnit } from '../contexts/DistanceUnitContext';
 import { getContactDisplayName } from '../utils/pubkey';
 import { handleKeyboardActivate } from '../utils/a11y';
 import { ContactAvatar } from './ContactAvatar';
@@ -186,6 +187,7 @@ function TraceNodeRow({
 }
 
 export function TracePane({ contacts, config, onRunTracePath }: TracePaneProps) {
+  const distanceUnit = useDistanceUnit();
   const [searchQuery, setSearchQuery] = useState('');
   const [sortMode, setSortMode] = useState<TraceSortMode>('alpha');
   const [draftHops, setDraftHops] = useState<TraceDraftHop[]>([]);
@@ -536,7 +538,7 @@ export function TracePane({ contacts, config, onRunTracePath }: TracePaneProps)
                         </div>
                         {sortMode === 'distance' && distanceKm !== null ? (
                           <div className="mt-1 text-[0.6875rem] text-muted-foreground">
-                            {distanceKm.toFixed(1)} km away
+                            {formatDistance(distanceKm, distanceUnit)} away
                           </div>
                         ) : null}
                         {selectedCount > 0 ? (