Build a "Compare two markets" side-by-side overlay launched from Markets list

[greatest0fallt1me]

Description

This is a UI/UX issue adding a compare mode on the Markets list that lets the user select up to two markets and opens a split-screen overlay with synchronized scroll for outcomes, fees, and oracle status.

Requirements and Context

• Selection chip floats at bottom when one or more markets selected
• Overlay is a Dialog with two columns at >=768px, stacked below
• Esc closes; Cmd+Backspace clears selection
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/markets-compare-overlay

2. Implement changes
   • Add components/market/CompareOverlay.tsx
   • Edit market list page to support multi-select
3. Test and commit
   • Manual test selecting from filtered lists
   • Cover edge cases (one market vs two)
   • Include test output and notes in the PR

Example commit message

feat: side-by-side market compare overlay

Acceptance Criteria

• Up to two markets compare cleanly
• Stacked layout on mobile preserves order
• Selection state persists during list filtering

Guidelines

• WCAG 2.1 AA, focus trap in overlay
• Clear documentation and inline comments
• Timeframe: 96 hours