Redesign monthly labs archive and detail UI

[hoangsvit]

Summary

• Redesign /monthly-labs/* as a consistent archive → month → detail experience.
• Replace generic nested content cards with dedicated month navigation cards and clickable lab/game cards.
• Rework lab detail pages into a responsive media + facts layout with clearer status, points, access code, deadline, slots and actions.
• Add responsive behavior for tablet/mobile and keep the existing site theme tokens, light/dark modes, localization, data model, routes and metadata unchanged.
• Update unit/browser verification to match the new UI hierarchy.
• Fix compatibility with the repository's current lucide-react icon set.

Scope

This is a stacked UI-only PR on #87. Its base is refactor/site-wide-ui-system, so the diff remains limited to Monthly Labs UI and its verification.

Changed files

• components/monthly-labs/pages.tsx
• app/styles/site-ui.css
• tests/monthly-labs.test.mjs
• scripts/verify-monthly-labs.mjs

Notes

• Existing route remains /monthly-labs/ (plural) to preserve sitemap and existing links.
• No monthly lab source data, parser, metadata, structured data, or route generation logic is changed.
• Previous CI failures were caused by unsupported Lucide icon names and stale browser-test selectors; both are corrected on this branch.

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

[github-actions]

🚀 PR preview ready

Open the live preview

• Commit: a42a7b5
• Pages artifact deployed successfully
• Live URL verified successfully
• Google Analytics remains disabled in previews
• Updates automatically when new commits are pushed

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ce820806-291c-47d8-a9f5-a1859caa399d

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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