Fix pagination: compact size and reliable theme responsiveness

[menvil]

Summary

• Root cause of broken theme colors: the previous vendor view stored Tailwind class names in PHP variables ($btnIdle, $btnActive, etc.). Tailwind's content scanner cannot follow PHP variable interpolation at build time, so classes like bg-rg-card, text-rg-text2, etc. were never emitted into the CSS bundle. The pagination fell back to browser defaults regardless of the active theme.

• Fix: moved all pagination styles into @layer components in app.css as three explicit CSS classes (rg-page-btn, rg-page-btn-active, rg-page-btn-off) using raw CSS variable references (var(--rg-card), var(--rg-accent-soft), etc.). These are always emitted unconditionally and inherit the correct resolved values from the html[data-theme="light"] overrides at runtime.

• Compact size: reduced button height from h-8 (32px) to 26px and chevron icons from size-3.5 to size-3.

Test plan

• Switch between light and dark theme — pagination buttons change color correctly both ways
• Pagination renders compactly (26px buttons, no excessive height)
• All feed tests pass

🤖 Generated with Claude Code

---

Summary by cubic

Fixes pagination theme colors and makes the control more compact. Styles now follow light/dark themes reliably and disabled/active states render correctly.

• Bug Fixes

  • Tailwind missed classes built from PHP variables, so theme colors weren’t bundled.
  • Moved pagination styles to @layer components in app.css as rg-page-btn, rg-page-btn-active, and rg-page-btn-off using CSS variables, and updated the vendor view to use them.

• Refactors

  • Reduced button height to 26px and chevron icon size to 3 for a denser pagination bar.

^{Written for commit f33140c. Summary will update on new commits.}

[coderabbitai]

Warning

Review limit reached

@menvil, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 7 minutes and 47 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: b32f575a-d217-4fb2-8ece-b2f586ebaac0

📥 Commits

Reviewing files that changed from the base of the PR and between f8a59db and f33140c.

📒 Files selected for processing (2)

• resources/css/app.css
• resources/views/vendor/pagination/tailwind.blade.php

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/pagination-theme-and-size

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}