Mobile layout fixes: pagination, related carousel, book-detail spacing - #310
Conversation
- Pagination: the .pagination/.page-item/.page-link classes carried no
framework CSS after Bootstrap's removal, so the page links stacked
vertically. Lay them out as a centred, wrapping flex row.
- Source links ("Cerca su"): on mobile they rendered ~300px wide and
left-packed, misaligned with the full-width Reserve/Favourite buttons above.
Stack them full width so the whole action area reads as one column.
- Info sections: dropped the 2rem all-around mobile padding that doubled up
with the column's px-3; vertical-only padding makes the info span the same
width as the title above.
- Card header (Informazioni Libro): removed the bottom hairline (explicit
border-bottom:none to beat the global .card-header rule) and balanced the
vertical padding.
- Related books (mobile carousel): below 767px it is a snap-scroll strip
showing one dominant whole book with ~15% of the next peeking as the scroll
affordance. Fixed the real bug: the base grid's justify-content:center leaked
into the overflowing flex strip and centred the cells, showing two half-covers
at scrollLeft 0 — reset to flex-start, start-aligned, snap-stop:always.
- Breadcrumb: the divider was scoped to .book-breadcrumb only, so the
catalogue breadcrumb had none — generalise it to every .breadcrumb, with
currentColor so it works on dark and light backgrounds.
- Add a theme-color meta so the mobile browser chrome uses the theme's
primary colour.
|
Warning Review limit reached
Next review available in: 48 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 Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughIl PR aggiorna gli stili responsive del dettaglio libro e del catalogo. Aggiunge il colore del tema del browser. Estende gli stili condivisi per breadcrumb e link sorgente su schermi piccoli. ChangesFrontend responsive
Estimated code review effort: 2 (Simple) | ~10 minuti Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/Views/frontend/book-detail.php`:
- Around line 1126-1133: Update the responsive styling for the card header so
that at viewports of 576px or less its horizontal margins become 1rem, matching
the mobile .card-body padding. Preserve the existing default margin for larger
viewports and the current border and vertical padding behavior.
In `@public/assets/frontend-layouts.css`:
- Line 61: Update the color-mix declaration in frontend-layouts.css to use the
lowercase CSS keyword currentcolor instead of currentColor, preserving the
existing color-mix values and behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 99d34f97-8cfd-4b9d-903b-bed12894c8c2
📒 Files selected for processing (4)
app/Views/frontend/book-detail.phpapp/Views/frontend/catalog.phpapp/Views/frontend/layout.phppublic/assets/frontend-layouts.css
- Align the book-info card header with the reduced card-body padding on
mobile (<=576px), overriding main.css's `.card-header { margin:0 !important }`
so the section label lines up with the meta rows below it.
- Lowercase `currentcolor` in the breadcrumb separator (stylelint
value-keyword-case).
1 participant
Fixes a batch of mobile layout issues on the catalogue and book-detail pages, all verified in a real browser at a 390px viewport.
Fixes
.pagination/.page-item/.page-linkhad no framework CSS, so the page links stacked vertically. They now lay out as a centred, wrapping flex row (desktop + mobile).px-3, leaving the info looking narrow. Vertical-only padding now makes the info span the same width as the title.border-bottom:noneto beat the global.card-headerrule in main.css) and balanced the vertical padding.justify-content:centerleaking into the overflowing flex strip: it centred the cells and showed two half-covers atscrollLeft:0. Reset toflex-start, start-aligned withscroll-snap-stop:always, and each cell now shows one dominant whole book with ~15% of the next peeking as the scroll affordance.›separator was scoped to.book-breadcrumbonly, so the catalogue breadcrumb had none. Generalised to every.breadcrumb, usingcurrentColorso it works on both the dark book text and the white catalogue hero.theme-colormeta so the mobile browser chrome uses the active theme's primary colour, resolved server-side.Notes
<style>block lives inside a double-quoted PHP string, so the CSS comments avoid"and$.Summary by CodeRabbit