Fix mobile overflow in dashboard overview and mobile nav

[vin-dKR]

📋 Summary

Related Issue: Fixes #9957

Fixes mobile Safari overflow on the logged-in dashboard around the Overview header controls so the page fits the viewport without horizontal scrolling.

🎯 What

• Updated Overview filter controls to be responsive:
  • Mobile: replaced SegmentedControl with a Select dropdown for CHART_RANGES
  • Desktop/tablet: kept existing SegmentedControl behavior unchanged
• Improved mobile spacing/layout between range control and Customize button (justify-between)
• Moved the mobile SelectItem checkmark indicator to the right for cleaner UX
• Matched mobile control heights for better alignment between the select and Customize button
• Fixed additional mobile overflow source in layout by updating MobileNav width behavior (w-screen → w-full/max-w-full + clipped horizontal overflow)

🤔 Why

Issue #9957 reports that dashboard controls under “Overview” overflow on mobile Safari and cause horizontal scrolling. This hurts usability and makes the screen look broken on iPhone/Safari-sized viewports. These changes ensure controls remain usable and contained on mobile while preserving the existing larger-screen UI.

🔧 How

• Added a mobile-only dropdown using the shared UI Select atom in OverviewSection
• Kept existing segmented control visible only on md+
• Applied mobile-only alignment/spacing classes to prevent overlap and overflow
• Applied targeted class overrides for select-item indicator placement and trigger sizing
• Adjusted MobileNav container sizing to avoid viewport-width overflow edge cases on mobile browsers

🧪 Testing

• I have tested these changes locally
• All existing tests pass (uv run task test for backend, pnpm test for frontend)
• I have added new tests for new functionality
• I have run linting and type checking (uv run task lint && uv run task lint_types for backend)

Test Instructions

1. Open dashboard while logged in on a mobile viewport (Safari responsive mode and/or iPhone Safari).
2. Confirm controls under Overview do not overflow horizontally and page fits screen width.
3. Verify mobile shows dropdown + Customize button aligned on one row.
4. Verify desktop/tablet still shows the original segmented control + Customize.
5. Open mobile nav and confirm no right-side overflow/horizontal scroll is introduced.

🖼️ Screenshots/Recordings

Before/after screenshots for mobile Safari overflow fix (attach in PR UI).

📝 Additional Notes

• Scope is intentionally limited to responsive behavior and layout containment.
• No backend/API changes.
• Existing desktop behavior is preserved.

✅ Pre-submission Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code where necessary
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have updated the relevant tests
• All tests pass locally
• AI/LLM Policy: If I used AI assistance, I have tested and executed the code locally (not just "vibe-coded")

Related issue: UI overflows on mobile safari #9957

[vercel]

@vin-dKR is attempting to deploy a commit to the polar-sh Team on Vercel.

A member of the Team first needs to authorize it.

[vin-dKR]

@pieterbeulque could you please check this pr