fix(home): card fills the slide; preview uses photo's natural aspect
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
Two complaints, one root cause: the FrameCard was floating in the slide with a min-height-padded preview, so (1) photos got top/bottom gray bars instead of fitting their container, and (2) there was a fat empty gap between the card body and the bottom nav. Restructured the large card to flex-fill its slide: - preview hugs the photo's intrinsic aspect ratio (img with width:100% height:auto); no min-height, no aspect-ratio override → no letterbox - card body has flex:1, info pinned at top, Add Photo button pinned at bottom via margin-top:auto and width:100% - HomeView main / single-card / carousel all flex:1 down through the layout so the slide gets the full available height - empty-state placeholder still reserves the device's aspect so the card doesn't jump while images load Result: the photo fills its container left/right with no bars; the body absorbs all remaining space below, with the action button always sitting just above the bottom nav. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -348,6 +348,7 @@ async function saveSettings() {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-view {
|
||||
flex: 1;
|
||||
padding: var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-4));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -397,6 +398,7 @@ async function saveSettings() {
|
||||
}
|
||||
|
||||
&__single {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -405,6 +407,8 @@ async function saveSettings() {
|
||||
// page's side padding so cards reach edge-to-edge; each slide pads itself
|
||||
// back in so the card visually aligns with the rest of the page.
|
||||
&__carousel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@@ -423,6 +427,8 @@ async function saveSettings() {
|
||||
padding: 0 var(--space-4);
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__dots {
|
||||
|
||||
Reference in New Issue
Block a user