Skip to content

Conversation

rachelks
Copy link
Member

Summary

Improves the BookCard so covers are displayed consistently without being cropped or stretched. Covers now use a reserved area and keep their original aspect ratio, while missing or failed covers use the existing fallback.

The BookCard layout was also adjusted to stay more stable when navigating between books with different amounts of metadata and subjects.

Changes

  • Added a consistent cover area for desktop and mobile
  • Centered covers and preserved their aspect ratio with object-fit: contain
  • Added fallback handling when a cover image fails to load
  • Adjusted metadata spacing to reduce layout shifts between books
  • Truncated long author lists visually while keeping the full text available
  • Added a reserved subject area with scrolling when subjects are expanded
  • Kept the subject expand/collapse control outside the scrollable area
  • Improved spacing on narrow screens

Testing

  • Added/updated BookCard tests for cover fallback, long authors and subject behavior
  • Updated affected snapshots
  • Manually tested different book covers and navigation between books
  • Manually tested the layout on desktop and at 320 px width
  • Manually verified subject expansion/collapse and favorites after merging the latest main
  • All 66 tests pass
  • npm run format:check passes
  • npm run lint passes
  • npm run build passes

AI assistance was used for discussing implementation options, resolving merge conflicts, and reviewing the changes. The implementation was tested and verified manually.

Closes #40

@rachelks rachelks requested a review from a team as a code owner September 17, 2026 11:45
@rachelks rachelks linked an issue Sep 17, 2026 that may be closed by this pull request
19 tasks
@rachelks rachelks changed the title Feat/40 consistent book covers feat: 40 consistent book covers Sep 17, 2026
@rachelks rachelks self-assigned this Sep 17, 2026
@rachelks rachelks added type: feature New functionality or requirement area: styling Plain CSS, responsive design priority: high Required for first delivery ai-assisted Substantial AI-generated code (documented per spec) labels Sep 17, 2026
@rachelks rachelks added this to the M4 — Quality milestone Sep 17, 2026
@rachelks rachelks changed the title feat: 40 consistent book covers feat: consistent book covers Sep 17, 2026
Copy link
Member

@robertky robertky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The cover handling, fallback state, and stable BookCard layout are well covered by tests, and CI is green

@robertky robertky merged commit 69b27f0 into main Sep 17, 2026
1 check passed
Sign in to join this conversation on GitHub.
Labels
ai-assisted Substantial AI-generated code (documented per spec) area: styling Plain CSS, responsive design priority: high Required for first delivery type: feature New functionality or requirement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: present OpenLibrary book covers consistently
2 participants