When the PWA is rotated on a phone, vertical space is too tight for the
full-bleed vertical stack. Detect landscape phones via
@media (orientation: landscape) and (max-height: 600px) and:
- Flip the stack to a horizontal scroll-snap carousel
- Shrink each slide to min(320px, 70vw) so 2-3 cards are visible at a time
- Restructure the card body to a single row: name + status on the left,
Add button on the right; sync line is dropped to keep things tight
- Constrain the photo to fill card height (object-fit: contain) instead
of card width, so it never overflows the short viewport
Manifest also updated to orientation: any so iOS doesn't lock the
standalone PWA back to portrait.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
