Fix: Overlapping cards on tablet screen sizes (640px–715px)

[muskan-773]

Fixes #21

This PR fixes a layout issue where project cards overlapped on
tablet screen sizes (640px–715px) by adjusting the grid breakpoint.
Desktop and mobile behavior remain unchanged.

Summary by CodeRabbit

• Style
  • Updated the Projects section grid layout breakpoints to display as a single column on smaller screens and transition to a two-column layout on medium screens.

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

[vercel]

@muskan-773 is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The responsive grid in the Projects section is adjusted from sm:grid-cols-2 to md:grid-cols-2, delaying the two-column layout from small (640px) to medium (768px) breakpoints. This resolves card overlap issues on tablet dimensions between 640px and 715px while maintaining the three-column layout on larger screens.

Changes

Cohort / File(s)	Summary
Projects Section Responsive Grid src/pages/index.jsx	Modified grid responsive breakpoint from sm:grid-cols-2 to md:grid-cols-2 to prevent card overlap on tablet dimensions (640–715px)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A hop, a skip, the cards align,
From small to medium, all divine,
No more overlap on tablet's screen,
The prettiest grid you've ever seen! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 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: fixing overlapping cards on tablet screen sizes (640px–715px), which is the primary objective of this PR.
Linked Issues check	✅ Passed	The code change adjusts the grid breakpoint from sm:grid-cols-2 to md:grid-cols-2, which delays the two-column layout to medium screens, effectively addressing the overlap issue in the 640px–715px range reported in issue #21.
Out of Scope Changes check	✅ Passed	The change is narrowly focused on the grid breakpoint in the Projects section, which directly addresses the linked issue with no extraneous modifications.

✨ 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: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dfb8668 and af0f6a9.

📒 Files selected for processing (1)

• src/pages/index.jsx

🔇 Additional comments (1)

src/pages/index.jsx (1)

175-175: LGTM! The breakpoint adjustment correctly fixes the overlap issue.

Changing from sm:grid-cols-2 (640px) to md:grid-cols-2 (768px) ensures that the problematic tablet range (640px–715px) now displays a single-column layout instead of attempting to fit two columns. This prevents the card overlap while maintaining the intended multi-column layouts for larger screens.

---

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

[muskan-773]

Thanks for the review!
The Vercel check requires team authorization, so it should be resolved once a maintainer reviews or merges the PR.
Happy to make any changes if needed.