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:
+1
@@ -0,0 +1 @@
|
||||
{"version":"4.1.5","results":[[":frontend/src/test/views/LibraryView.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/views/HomeView.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/views/UploadView.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/stores/images.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/stores/upload.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/stores/devices.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/ApproveCard.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BaseBottomSheet.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/DevicePicker.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/FrameCard.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/ShareSheet.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/composables/useTheme.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BottomNav.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BaseButton.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/App.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BaseInput.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/views/SettingsView.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/StickerTray.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/stores/toast.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/stores/auth.test.ts",{"duration":53.48111400000005,"failed":true}],[":frontend/src/test/components/OrientationPicker.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BaseToast.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BaseChip.test.ts",{"duration":0,"failed":true}],[":frontend/src/test/components/BaseCard.test.ts",{"duration":0,"failed":true}]]}
|
||||
Reference in New Issue
Block a user