fix(home): card fills the slide; preview uses photo's natural aspect

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>

frontend/src/test/components/FrameCard.test.ts

@@ -123,20 +123,19 @@ describe('FrameCard', () => {
     expect(wrapper.emitted('edit')![0]).toEqual([1])
   })
 
-  it('sets landscape aspect ratio style in large mode', () => {
+  it('reserves a 5:3 aspect placeholder when no thumbnail is present (landscape)', () => {
     const wrapper = mount(FrameCard, {
       props: { ...defaultProps, size: 'large', orientation: 'landscape' },
     })
-    const preview = wrapper.find('.frame-card__preview')
-    // Vue serializes { aspectRatio: '5/3' } as 'aspect-ratio: 5 / 3;'
-    expect(preview.attributes('style')).toMatch(/aspect-ratio:\s*5\s*\/\s*3/)
+    const empty = wrapper.find('.frame-card__empty-preview')
+    expect(empty.attributes('style')).toMatch(/aspect-ratio:\s*5\s*\/\s*3/)
   })
 
-  it('sets portrait aspect ratio style in large mode', () => {
+  it('reserves a 3:5 aspect placeholder when no thumbnail is present (portrait)', () => {
     const wrapper = mount(FrameCard, {
       props: { ...defaultProps, size: 'large', orientation: 'portrait' },
     })
-    const preview = wrapper.find('.frame-card__preview')
-    expect(preview.attributes('style')).toMatch(/aspect-ratio:\s*3\s*\/\s*5/)
+    const empty = wrapper.find('.frame-card__empty-preview')
+    expect(empty.attributes('style')).toMatch(/aspect-ratio:\s*3\s*\/\s*5/)
   })
 })