Fix splits page: km/mi toggle conversion and button hover styles

[Copilot]

The splits page had two issues: the km/mi toggle only swapped the label without converting the distance value (e.g. selecting Half Marathon then toggling to miles kept 21.0975 as miles instead of converting to 13.1), and the shadcn <Button> component's built-in hover styles conflicted with custom Tailwind classes.

Distance conversion

• Added convertDistance() to split-calculator utils with smart snapping to common race distances (5K, 10K, half, full)
• handleUnitToggle now converts the distance value when switching units, matching /calculator behavior

const handleUnitToggle = (unit: DistanceUnit) => {
  if (unit === inputs.units) return;
  if (inputs.distance && !isNaN(parseFloat(inputs.distance))) {
    const converted = convertDistance(parseFloat(inputs.distance), inputs.units, unit);
    setInputs((prev) => ({ ...prev, units: unit, distance: converted.toString() }));
  } else {
    setInputs((prev) => ({ ...prev, units: unit }));
  }
  setResults(null);
};

Button hover styles

• Replaced shadcn <Button> with native <button> elements using explicit Tailwind hover classes, consistent with /calculator
• Replaced plain km/mi button pair with the calculator's animated sliding toggle

Tests

• 4 new convertDistance test cases covering round-trip snapping and non-common distances

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[netlify]

✅ Deploy Preview for trainpace ready!

Name	Link
🔨 Latest commit	a663bfd
🔍 Latest deploy log	https://app.netlify.com/projects/trainpace/deploys/69a7dfc813572e000853987b
😎 Deploy Preview	https://deploy-preview-28--trainpace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 80 Accessibility: 89 Best Practices: 100 SEO: 100 PWA: 60 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
trainpace	Ready	Preview, Comment	Mar 4, 2026 7:31am