From 78405b644da547b7ef91c58776c55d19cfa65d6d Mon Sep 17 00:00:00 2001 From: Matt Edholm Date: Wed, 6 May 2026 18:39:58 -0400 Subject: [PATCH] fix(home): card fills the slide; preview uses photo's natural aspect MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- frontend/src/components/FrameCard.vue | 54 +++++++++++++------ .../src/test/components/FrameCard.test.ts | 13 +++-- frontend/src/views/HomeView.vue | 6 +++ .../results.json | 1 + ...CuRF4Y8.js => BaseBottomSheet-CXcLrct9.js} | 2 +- ...r-DNvUCXsz.js => DevicePicker-MIsIaweQ.js} | 2 +- public/build/assets/HomeView-B-yz7GFB.js | 1 + public/build/assets/HomeView-D3jnhgMf.css | 1 - public/build/assets/HomeView-Dfp3ZSZG.js | 1 - public/build/assets/HomeView-hc6H9m3_.css | 1 + ...ew-BZZoWGTd.js => LibraryView-CkcxjjBz.js} | 2 +- ...w-CJsokRE1.js => SettingsView-CURB-Bg6.js} | 2 +- ...iew-BO69QYu9.js => UploadView-CsBgOdoF.js} | 2 +- .../{index-BxH1sIci.js => index-aP_uBWCi.js} | 4 +- public/build/index.html | 2 +- 15 files changed, 61 insertions(+), 33 deletions(-) create mode 100644 node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json rename public/build/assets/{BaseBottomSheet-DCuRF4Y8.js => BaseBottomSheet-CXcLrct9.js} (98%) rename public/build/assets/{DevicePicker-DNvUCXsz.js => DevicePicker-MIsIaweQ.js} (96%) create mode 100644 public/build/assets/HomeView-B-yz7GFB.js delete mode 100644 public/build/assets/HomeView-D3jnhgMf.css delete mode 100644 public/build/assets/HomeView-Dfp3ZSZG.js create mode 100644 public/build/assets/HomeView-hc6H9m3_.css rename public/build/assets/{LibraryView-BZZoWGTd.js => LibraryView-CkcxjjBz.js} (98%) rename public/build/assets/{SettingsView-CJsokRE1.js => SettingsView-CURB-Bg6.js} (92%) rename public/build/assets/{UploadView-BO69QYu9.js => UploadView-CsBgOdoF.js} (98%) rename public/build/assets/{index-BxH1sIci.js => index-aP_uBWCi.js} (99%) diff --git a/frontend/src/components/FrameCard.vue b/frontend/src/components/FrameCard.vue index c7fbcd9..78dcb1d 100644 --- a/frontend/src/components/FrameCard.vue +++ b/frontend/src/components/FrameCard.vue @@ -28,7 +28,7 @@ :alt="`Current photo on ${name}`" class="frame-card__img" /> -