fix(home): floor frame-card preview to 50dvh so landscape frames feel hero-sized
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
The natural 5:3 aspect ratio renders landscape devices as a ~200px-tall strip on a phone — too small now that the carousel gives each slide the full viewport. Set min-height: 50dvh so landscape preview is at least half the screen tall, with object-fit: contain letterboxing the photo. Portrait frames (3:5) still drive their height from the natural aspect ratio, since that's already taller than the 50dvh floor. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -169,17 +169,21 @@ const statusText = computed(() => {
|
||||
}
|
||||
|
||||
// ── Large (single device or carousel slide) ──────────────────────────────
|
||||
// Floor the preview to a healthy chunk of the viewport so landscape frames
|
||||
// (5:3) don't render as a thin strip. Portrait frames (3:5) keep their
|
||||
// natural aspect — taller still wins.
|
||||
&--large &__preview {
|
||||
background: var(--color-surface-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 50dvh;
|
||||
}
|
||||
|
||||
&--large &__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&--large &__empty-preview {
|
||||
|
||||
Reference in New Issue
Block a user