fix(posts): post-card thumbnail strip spans the full hero width
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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user