feat: improve registries grid responsiveness

[kyrers]

Resolves #91.

---

PR-Codex overview

This PR introduces a new small breakpoint constant and modifies the logic for determining the number of registries displayed per page based on the window width.

Detailed summary

• Added SM_BREAKPOINT constant with a value of 600 in web/src/styles/breakpoints.ts.
• Updated import statement in web/src/pages/AllLists/RegistriesFetcher.tsx to include SM_BREAKPOINT.
• Changed the registriesPerPage calculation to consider SM_BREAKPOINT, adjusting the display logic for smaller widths.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

• New Features
  • Registries list now adapts to your screen size, displaying between 3-9 items per page for optimized viewing across all devices.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for curate-v2 ready!

Name	Link
🔨 Latest commit	45b7f04
🔍 Latest deploy log	https://app.netlify.com/projects/curate-v2/deploys/69261ad936781d0008bfc15c
😎 Deploy Preview	https://deploy-preview-93--curate-v2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

The changes introduce a new small breakpoint constant and update the registry grid pagination logic to respond to three viewport sizes instead of two, enabling more granular layout control.

Changes

Cohort / File(s)	Summary
Breakpoint Definition web/src/styles/breakpoints.ts	Added new exported constant SM_BREAKPOINT with value 600px
Responsive Pagination Logic web/src/pages/AllLists/RegistriesFetcher.tsx	Imported SM_BREAKPOINT and refactored registriesPerPage calculation from binary logic (9 or 3) to three-tier responsive system: 9 for large screens (width > 900px), 6 for medium screens (900px ≥ width > 600px), and 3 for small screens (width ≤ 600px)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Straightforward constant addition with no side effects
• Responsive logic update follows a clear, predictable pattern
• Limited scope with only two files modified
• Changes align directly with issue requirements for improved screen width differentiation

Poem

🐰 A tiny breakpoint hopped into view,
Making grids dance—now three sizes, not two!
Registries glide on screens large and small,
Responsive and balanced, they're perfect for all! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: improving registries grid responsiveness through a three-tier responsive breakpoint system.
Linked Issues check	✅ Passed	The PR fully addresses issue #91 by replacing hardcoded values (3 or 9) with three-tier responsive logic (3, 6, or 9 registries) using SM_BREAKPOINT and LG_BREAKPOINT.
Out of Scope Changes check	✅ Passed	All changes are directly related to improving registries grid responsiveness: adding SM_BREAKPOINT constant and implementing three-tier responsive logic for registriesPerPage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/registries-grid-responsiveness

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

web/src/styles/breakpoints.ts (1)

1-2: Confirm SM_BREAKPOINT matches your CSS/grid breakpoint

SM_BREAKPOINT at 600 makes sense, but given LG_BREAKPOINT is explicitly aligned with the UI/Tailwind lg override, it’s worth double‑checking that 600px is the same threshold your grid/layout uses for the “small ↔ medium” transition. If the CSS breakpoint differs, consider either updating this value or renaming the constant to avoid drift between pagination logic and the visual layout.

Based on learnings, this keeps TS breakpoints consistent with your Tailwind/ui-components configuration.

web/src/pages/AllLists/RegistriesFetcher.tsx (1)

14-25: Align breakpoint comparisons and consider clarifying the ternary

The new three‑tier logic (9 / 6 / 3) looks good and matches the responsive goal, but two small tweaks could make it more robust and readable:

• If LG_BREAKPOINT and SM_BREAKPOINT represent the widths at which layouts switch (i.e., min‑width breakpoints), you probably want >= so that widths exactly at 900px/600px fall into the higher tier rather than the lower one:

-  const registriesPerPage = width > LG_BREAKPOINT ? 9 : width > SM_BREAKPOINT ? 6 : 3;
+  const registriesPerPage =
+    width >= LG_BREAKPOINT ? 9 : width >= SM_BREAKPOINT ? 6 : 3;

• Optional: for readability, you might extract this into a small helper or expand to an if/else ladder instead of a nested ternary, especially if more breakpoints are added later.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2a51f06 and 45b7f04.

📒 Files selected for processing (2)

• web/src/pages/AllLists/RegistriesFetcher.tsx (2 hunks)
• web/src/styles/breakpoints.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.

📚 Learning: 2025-11-14T22:12:39.974Z

Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/styles/breakpoints.ts:1-1
Timestamp: 2025-11-14T22:12:39.974Z
Learning: In the kleros/curate-v2 repository, the kleros/ui-components-library overrides Tailwind's lg breakpoint to 900px (not the default 1024px). The LG_BREAKPOINT constant in web/src/styles/breakpoints.ts is set to 900 to match this override. This configuration is imported via the source directive in global.css.

Applied to files:

• web/src/pages/AllLists/RegistriesFetcher.tsx
• web/src/styles/breakpoints.ts

🧬 Code graph analysis (1)

web/src/pages/AllLists/RegistriesFetcher.tsx (1)

web/src/styles/breakpoints.ts (2)

• LG_BREAKPOINT (1-1)
• SM_BREAKPOINT (2-2)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Redirect rules - curate-v2
• GitHub Check: Header rules - curate-v2
• GitHub Check: Pages changed - curate-v2

[tractorss]

looks good