feat(ui): Use 4 column grid for dashboard instances on 2xl screens

[ewenjo]

Tested with both xl:grid-cols-4 and 2xl:grid-cols-4, but found that 4 columns can be too small on the lower end of xl sizes.

Before

After

Summary by CodeRabbit

• Style
  • Improved Instance grid responsiveness with an additional breakpoint for very large screens, now displaying four columns instead of three on extra-wide displays.

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

[coderabbitai]

Walkthrough

The Dashboard component's Instance grid layout is enhanced with an additional responsive breakpoint, adding support for four-column layouts on extra-large (2xl) screens. The grid classes are extended from three responsive sizes to four, enabling better use of wider displays.

Changes

Cohort / File(s)	Summary
Grid Layout Enhancement web/src/pages/Dashboard.tsx	Extended Instance grid responsive breakpoints: added 2xl:grid-cols-4 to display four columns on extra-large screens. Tailwind CSS classes updated from sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 to sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰✨ A grid that grows with screens so wide,
Four columns now stand side by side,
On 2xl lands where space runs free,
The Dashboard dances gracefully! 🎨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a 4-column grid layout for dashboard instances on 2xl screens, which directly aligns with the file modifications and PR objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bffecbd and e2480e0.

📒 Files selected for processing (1)

• web/src/pages/Dashboard.tsx

🔇 Additional comments (1)

web/src/pages/Dashboard.tsx (1)

2334-2334: LGTM! Well-considered responsive enhancement.

The addition of 2xl:grid-cols-4 provides better use of wider displays while maintaining a logical responsive progression. The choice of 2xl over xl (as mentioned in the PR description) demonstrates thoughtful UX consideration.

---

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.}