Fix unit display errors

src/components/ui/measurement-display.tsx

@@ -47,7 +47,7 @@ export function MeasurementDisplay({
     return defaultPrefs;
   }, [profile]);
 
-  const { displayValue, unit, alternateDisplay } = useMemo(() => {
+  const { displayValue, unit, alternateDisplay, tooltipText } = useMemo(() => {
     const system = unitPreferences.measurement_system;
     
     let displayValue: number;
@@ -88,12 +88,13 @@ export function MeasurementDisplay({
     }
     
     const alternateDisplay = showBothUnits ? ` (${alternateValue} ${alternateUnit})` : '';
+    const tooltipText = showBothUnits ? undefined : `${alternateValue} ${alternateUnit}`;
     
-    return { displayValue, unit, alternateDisplay };
+    return { displayValue, unit, alternateDisplay, tooltipText };
   }, [value, type, unitPreferences.measurement_system, showBothUnits]);
 
   return (
-    <span className={className} title={showBothUnits ? undefined : alternateDisplay ? `${alternateValue} ${alternateUnit}` : undefined}>
+    <span className={className} title={tooltipText}>
       {displayValue} {unit}{alternateDisplay}
     </span>
   );

src/components/ui/speed-display.tsx

@@ -0,0 +1,52 @@
+import { MeasurementDisplay } from './measurement-display';
+
+interface SpeedDisplayProps {
+  kmh: number;
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function SpeedDisplay({ kmh, showBothUnits = false, className }: SpeedDisplayProps) {
+  return (
+    <MeasurementDisplay 
+      value={kmh} 
+      type="speed" 
+      showBothUnits={showBothUnits} 
+      className={className} 
+    />
+  );
+}
+
+interface DistanceDisplayProps {
+  meters: number;
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function DistanceDisplay({ meters, showBothUnits = false, className }: DistanceDisplayProps) {
+  return (
+    <MeasurementDisplay 
+      value={meters} 
+      type="distance" 
+      showBothUnits={showBothUnits} 
+      className={className} 
+    />
+  );
+}
+
+interface HeightDisplayProps {
+  cm: number;
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function HeightDisplay({ cm, showBothUnits = false, className }: HeightDisplayProps) {
+  return (
+    <MeasurementDisplay 
+      value={cm} 
+      type="height" 
+      showBothUnits={showBothUnits} 
+      className={className} 
+    />
+  );
+}