fix(posts): post-card thumbnail strip spans the full hero width
CI / lint (push) Successful in 2s
CI / frontend-build (push) Successful in 21s
CI / backend-lint-and-test (push) Successful in 25s
CI / integration (push) Successful in 3m1s

The hero collage's thumbnail rail hard-capped at 3 fixed-80px cells, left-
aligned, so it never reached the edge of the (50%-width) hero. Make the rail a
CSS grid of equal columns (1fr) at a fixed height that stretches to the hero's
full width: show up to 5 thumbnails, and when a post has more images than fit,
the last cell becomes the "+N" overflow tile (count unchanged). Column count is
driven by --fc-rail-cols so the strip always reaches the hero edge regardless
of image count.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-06 17:04:23 -04:00
parent 6332ae13fd
commit 9374f63953
2 changed files with 56 additions and 8 deletions
+24
View File
@@ -40,6 +40,30 @@ describe('PostCard', () => {
expect(full.text()).not.toContain('Show more')
})
const thumbs = (n) =>
Array.from({ length: n }, (_, i) => ({ image_id: 100 + i, thumbnail_url: `/t${i}` }))
it('fills the rail to full width (5 cells, no overflow) for a 6-image post', () => {
const post = { ...BASE, description_plain: 'd', thumbnails: thumbs(6), thumbnails_more: 0 }
const w = mountComponent(PostCard, { props: { post }, pinia: freshPinia() })
// hero + 5 rail thumbnails, no "+N" tile.
expect(w.findAll('.fc-post-card__rail-cell')).toHaveLength(5)
expect(w.find('.fc-post-card__rail-more').exists()).toBe(false)
// The grid spans the hero width via a column count == cells shown.
expect(w.find('.fc-post-card__rail').attributes('style')).toContain('--fc-rail-cols: 5')
})
it('reserves the last cell for a "+N" overflow tile when there are more images', () => {
const post = { ...BASE, description_plain: 'd', thumbnails: thumbs(6), thumbnails_more: 4 }
const w = mountComponent(PostCard, { props: { post }, pinia: freshPinia() })
// 4 thumbnails + 1 overflow tile == 5 columns; tile counts every hidden image.
expect(w.findAll('.fc-post-card__rail-cell')).toHaveLength(4)
const more = w.find('.fc-post-card__rail-more')
expect(more.exists()).toBe(true)
expect(more.text()).toBe('+5')
expect(w.find('.fc-post-card__rail').attributes('style')).toContain('--fc-rail-cols: 5')
})
it('clicking an image opens the post-scoped modal (never expands the card)', async () => {
const pinia = freshPinia()
const modal = useModalStore()