feat(home): full-size frame card; horizontal carousel for multi-frame setups
CI / test (push) Has been cancelled

Reverts the 240px preview cap — frames render at their natural device aspect
again. Single-frame layout unchanged.

For multi-frame setups, replaces the compact stack with a horizontal
scroll-snap carousel: one large card per slide, full-bleed to the viewport
edges, with dot navigation below that tracks the active slide and supports
tap-to-jump. Native CSS scroll-snap drives the swipe gesture; no extra JS
gesture library.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-06 18:28:49 -04:00
parent 78ff21fb98
commit 089e317691
14 changed files with 174 additions and 42 deletions
+2 -7
View File
@@ -168,23 +168,18 @@ const statusText = computed(() => {
opacity: 0.6;
}
// ── Large (single device) ────────────────────────────────────────────────
// Portrait frames have aspect 3:5 — at full mobile width (~360px) that would
// be 600px tall and totally dominate the screen. Cap so the card stays
// phone-friendly while still showing the photo at the frame's real shape.
// ── Large (single device or carousel slide) ──────────────────────────────
&--large &__preview {
background: var(--color-surface-2);
display: flex;
align-items: center;
justify-content: center;
max-height: min(240px, 30dvh);
overflow: hidden;
}
&--large &__img {
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
}
&--large &__empty-preview {