Add safe-area inset support and bottom-padding choreography for iOS PWA install

[greatest0fallt1me]

Description

This is a UI/UX issue making app/(dashboard)/layout.tsx and the marketing footer respect iOS safe-area insets so the home indicator does not overlap CTAs. Includes a per-route choreography for sticky bottom bars to lift above the indicator.

Requirements and Context

• Use env(safe-area-inset-bottom) and add viewport-fit=cover
• Audit sticky panels in components/disputes/, components/patterns/BetConfirmPattern.tsx
• Document tokens in design-system
• 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 task/safe-area-insets

2. Implement changes
   • Edit app/layout.tsx viewport meta
   • Edit app/globals.css to introduce --safe-pb
3. Test and commit
   • Manual test on iPhone 15 in PWA installed mode
   • Cover edge cases (landscape orientation)
   • Include test output and notes in the PR

Example commit message

task: safe-area inset support across dashboard

Acceptance Criteria

• No content sits under the home indicator
• Landscape and portrait both verified
• Token documented and reusable

Guidelines

• WCAG 2.1 AA, mobile target area minimums
• Clear documentation and inline comments
• Timeframe: 96 hours