TT-7335 Improve aesthetics of racetrack UI

[nghtctrl]

Changes:

• Make the parallelograms (i.e., racetrack) bigger
• Add dropdown for passage navigation (and make sure it works differently depending on the passage progression mode) -- the actual button styling will need to be adjusted by theme control, which is out of scope for this PR
• Fix how the racetrack centers itself on bigger screens (e.g., tablets and laptop screens)

Before:

After:

[Copilot]

Pull request overview

Improves the mobile racetrack (workflow step) UI: enlarges the parallelogram step indicators, adds a placeholder passage-navigation dropdown beside them, and adjusts layout so the racetrack stays centered on wider screens via a mirroring spacer.

Changes:

• Resize step indicators to 80×30 with a clipPath parallelogram, overlap edges, and reformat the centered label/tip.
• Add a passage-selection Button+Menu (book/reference) that, when an item is chosen, persists the current passage and navigates via usePassageNavigate.
• Track the dropdown width with useLayoutEffect+ResizeObserver and render a matching spacer so mx:auto centers the parallelograms.

[gtryus]

I also put some devin.ai comments into the code but here is one that doesn't fit in this module.

devin.ai reports this issue:
Cypress testing rule file references outdated SVG-based rendering
The .cursor/rules/cypress-testing-takeaways.mdc states: "WorkflowStepsMobile renders SVG stages (no visible text nodes). Assert on structure (svg, svg g)." The component no longer uses SVG — it now uses CSS clipPath on ButtonBase elements. The existing Cypress tests in MobileWorkflowSteps.cy.tsx correctly use data-cy selectors and don't rely on SVG structure, so they should still pass. However, the rule file is now stale and should be updated to reflect the new rendering approach (CSS clip-path parallelograms, passage dropdown). Similarly, the advice about dispatching a resize event after mount may no longer be needed since the width-driven step list was replaced with a flex/scroll layout.