Related-books section: responsive columns, no more enormous covers on large screens#278
Conversation
…olumns) The "Potrebbero interessarti" section on the frontend book page used Bootstrap `col-lg-4 col-md-6` with no cap beyond `lg`, inside the theme's ultra-wide `.container` (~2355px on a 2560px screen). With max 3 related books that meant 3 columns of ~440px+, and since each cover is 140% of the card width, the covers ballooned (~615px tall) on large monitors. - Cap `.related-book-card` to a book-sane 280px (matching the catalog card size), centred in its column, so the cover never balloons. - Responsive column count by screen size: `col-12 col-sm-6 col-lg-4` (1 / 2 / 3 columns), with `justify-content-center`. - Constrain the row (`.related-books-row`, max-width 960px, centred) so the three cards group together in the middle instead of spreading across the wide container. Verified live at 375 / 768 / 1024 / 1440 / 1920 / 2560px: cards stay book-sized (280px on desktop, ≤400px on mobile), columns scale 1→2→3, covers no longer enormous.
|
Warning Review limit reached
Next review available in: 45 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🔎 Adams Review — PR #278 (related-books responsive)Adversarial pass (structural + UX). The fix does solve the reported problem — covers no longer balloon on large screens (verified 375→2560px). Three minor, non-blocking polish items surfaced; none regress the fix. ℹ️ UX — size inversion at the 768px breakpoint (confirmed by measurement)The pre-existing ℹ️ UX — "matches the catalog card size (~280px)" is impreciseThe catalog grid uses ℹ️ Structural —
|
…r override Adams-review follow-ups on the related-books responsive fix: - 768px inversion: a pre-existing @media(max-width:768px) rule capped the card at 400px while the new base cap was 280px, so the card was allowed wider on mobile than on desktop — widening the window past 768px visibly *shrank* it (measured 760px→310px, 780px→280px). Removed the mobile override; the uniform 280px cap now keeps the transition monotonic (760px→280, 780px→280). - !important gutter override: `.related-books-row` set margin:auto !important on the same element as Bootstrap's .row, clobbering its negative gutter margins. Replaced with a plain `.related-books-wrap` div carrying the 960px cap + centering, leaving .row untouched — no !important needed. - Corrected the card comment: 280px is the catalog grid's minmax() *floor* (which stretches), used here as a hard cap; the "matches catalog size" claim overstated the parity. Verified live at 375/600/760/780/1024/1920/2560px: card width monotonic (280px cap, column-constrained below), wrap centred at 960px on wide screens, no inversion. DOM balanced.
… 768px inversion, 1→2→3 columns, centred wrap)
#278 related-books responsive, reusable tests)
1 participant
The "Potrebbero interessarti" section on the frontend book page looked terrible on large screens — the book covers were enormous.
Cause
It used Bootstrap
col-lg-4 col-md-6with no cap beyondlg, inside the theme's ultra-wide.container(~2355px on a 2560px monitor). With at most 3 related books that meant 3 columns of ~440px+, and since each cover ispadding-top: 140%of the card width, the covers ballooned to ~615px tall on large displays.Fix
.related-book-card) to a book-sane 280px (matching the catalog card size), centred in its column — the cover can no longer balloon.col-12 col-sm-6 col-lg-4→ 1 / 2 / 3 columns as the screen grows, withjustify-content-center..related-books-row, max-width 960px, centred) so the three cards sit together in the middle instead of spreading across the wide container.Verified live
At 375 / 768 / 1024 / 1440 / 1920 / 2560px: cards stay book-sized (280px on desktop, ≤400px on mobile via the existing mobile rule), columns scale 1→2→3, covers no longer enormous. PHPStan clean.
Note: the section shows up to 3 related books (
getRelatedBookslimit). If you'd like more columns to be meaningful on very wide screens, that would mean raising that limit — happy to do it if you want.