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

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>

frontend/public/manifest.webmanifest

@@ -6,7 +6,7 @@
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "orientation": "portrait",
+  "orientation": "any",
   "background_color": "#fdf6ee",
   "theme_color": "#fdf6ee",
   "icons": [

frontend/src/components/FrameCard.vue

@@ -293,5 +293,55 @@ const statusText = computed(() => {
   }
 
   &__add-btn { flex-shrink: 0; }
+
+  // ── Landscape phone: dense horizontal layout ─────────────────────────────
+  // Photo is height-constrained (preview takes flex:1, image letterboxed) so
+  // it doesn't blow past the short viewport. Body collapses to a single row
+  // — name + status on the left, Add button on the right — and the sync
+  // line is dropped to keep the card tight.
+  @media (orientation: landscape) and (max-height: 600px) {
+    &--large &__preview {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    &--large &__img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    &--large &__body {
+      flex: 0 0 auto;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-2) var(--space-3);
+    }
+
+    &--large &__info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &--large &__sync-line { display: none; }
+
+    &--large &__add-btn {
+      margin-top: 0;
+      width: auto;
+      flex-shrink: 0;
+    }
+
+    &--large &__settings-btn {
+      width: 32px;
+      height: 32px;
+      top: var(--space-1);
+      right: var(--space-1);
+    }
+  }
 }
 </style>

frontend/src/views/HomeView.vue

@@ -396,6 +396,28 @@ async function saveSettings() {
     scroll-snap-stop: always;
   }
 
+  // Landscape phone: horizontal carousel of smaller cards. Vertical space is
+  // tight (~240-280px usable) so we side-scroll instead of paging vertically,
+  // and each card shrinks to ~320px wide so 2-3 are visible at a time.
+  @media (orientation: landscape) and (max-height: 600px) {
+    &__stack {
+      flex-direction: row;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scroll-snap-type: x mandatory;
+      gap: var(--space-3);
+      margin: 0 calc(-1 * var(--space-4));
+      padding: 0 var(--space-4);
+    }
+
+    &__slide {
+      flex: 0 0 min(320px, 70vw);
+      min-height: 0;
+      height: 100%;
+      scroll-snap-align: center;
+    }
+  }
+
   &__sheet-title {
     font-size: var(--text-md);
     font-weight: 700;