fix(frame-card): cap portrait preview to 40dvh so cards stop dominating
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
Portrait frames (3:5 aspect) at full card width were rendering 600px tall and pushing the body well off-screen. Cap preview max-height at 40dvh and switch the img sizing to max-width/max-height: 100% with auto width/height — photo scales to fit inside the capped preview at its native aspect, with narrow grey side bars filling the leftover horizontal space. Landscape frames are short enough that the cap never engages. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -186,16 +186,25 @@ const statusText = computed(() => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Cap the preview height so portrait frames (3:5) don't blow past half
|
||||
// the viewport. Landscape frames (5:3) at full card width are short enough
|
||||
// that the cap never engages. The photo is centered within the preview;
|
||||
// portrait shots get a thin grey bar on each side instead of stretching.
|
||||
&--large &__preview {
|
||||
flex: 0 0 auto;
|
||||
background: var(--color-surface-2);
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
max-height: 40dvh;
|
||||
}
|
||||
|
||||
&--large &__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user