Phase 1: Mobile month view redesign (issue #46)

[andorcassian]

Summary

Implements Phase 1 of the mobile calendar redesign from the design spec in mobile-design/MOBILE-DESIGN-SPEC.md.

✅ Implemented

• Dot indicators on mobile month grid (replacing inline event cards)
• Tap-to-reveal day detail panel below the grid
• Compact sticky mobile header with prev/next navigation and Today affordance
• Swipe month navigation via Alpine touch events
• Today indicator rendered as blue circular badge on mobile
• Drag-and-drop interaction auto-disabled on touch/mobile widths
• Desktop behavior preserved using md: / lg: responsive separation

Files changed

• resources/views/calendar.blade.php
• resources/views/day.blade.php
• resources/views/day-of-week.blade.php
• resources/views/mobile-day-detail.blade.php (new)
• src/LivewireCalendar.php

Validation

• composer test passes (16 tests).

References

• Design spec: mobile-design/MOBILE-DESIGN-SPEC.md
• Closes Feature Request: Mobile View improvement #46

[andorcassian]

📱 Before / After Screenshots — Phase 1 Mobile Redesign

Before (Mobile 375px)

The old layout renders desktop-sized cells on mobile, requiring horizontal scroll. Event cards are fully displayed inline, taking excessive vertical space.

After (Mobile 375px)

Compact grid with dot indicators, blue circle today marker (Feb 17), tap-to-reveal day detail panel (showing Feb 20 events), and compact sticky header with navigation arrows.

After (Desktop 1280px) — No Regression

Desktop view is unchanged: full event cards, yellow today highlight, standard grid layout.

---

Key changes visible:

• ✅ Dot indicators replace event cards on mobile
• ✅ Tap-to-reveal day detail panel with event list
• ✅ Compact sticky header (h-11) with prev/next navigation
• ✅ Blue circle today marker (replaces yellow background)
• ✅ Desktop view fully preserved (no regression)
• ✅ Touch-friendly 44px tap targets

Screenshots generated from static HTML mockups of the Blade templates at commit 2391209.