feat(home): landscape-phone layout — horizontal carousel of compact cards

Browse Source

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>

...

This commit is contained in:

Matt Edholm

2026-05-06 18:54:48 -04:00

parent 365301882f

commit b0fc07b94e

14 changed files with 84 additions and 12 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

public/build/assets/HomeView-Dm15fACK.css

+1

File diff suppressed because one or more lines are too long