fix: PR Analytics layout on tablet/desktop(ipad pro)

[SaishWadnere]

Summary

This code sets up a layout that switches from 4 columns on small screens (mobile) to 2 columns on medium-and-up screens

Closes #334

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

Before
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">

After
<div className="grid grid-cols-4 md:grid-cols-2 gap-4">

How to Test

Steps for the reviewer to verify this works:

1. Open your app in the browser, right-click anywhere, and select Inspect.
2. Click the Device Toolbar icon (the phone/tablet icon in the top-left of the inspector).
3. Select iPad Pro from the top dimensions dropdown.
4. The Test: Verify that the cards are now sitting perfectly in a balanced grid without clipping text or overflowing.

Screenshots (if UI change)

For screen width smaller that is 768px

For screen width larger than 768px

For Ipad pro

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@SaishWadnere is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

[Priyanshu-byte-coder]

Hi @SaishWadnere — the fix has the breakpoints inverted, which makes mobile worse not better.

Current (correct for mobile):

grid-cols-2 md:grid-cols-4

This gives 2 columns on mobile, 4 on tablet/desktop — which is correct.

Your change:

grid-cols-4 md:grid-cols-2

This gives 4 columns on mobile (very narrow cells) and 2 on tablet+ — the opposite of what's wanted.

The real issue for iPad Pro cramping is the md: breakpoint is too small (768px). Fix by using lg: instead:

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">

lg: triggers at 1024px, which gives iPads 2 columns and larger desktops 4. Please update and push.

[Priyanshu-byte-coder]

Change is wrong — grid-cols-4 lg:grid-cols-4 forces 4 columns on all screen sizes including mobile, making the stat cards too narrow to read.

The correct fix for the iPad Pro layout issue is to keep 2 columns on mobile and small screens, and use 4 columns only on large screens:

className="grid grid-cols-2 lg:grid-cols-4 gap-4"

Also rebase on main — the base changed after recent PRs merged.

[Priyanshu-byte-coder]

1. PR description doesn't match diff — description says changing grid-cols-2 md:grid-cols-4 to grid-cols-4 md:grid-cols-2 but actual diff is md:grid-cols-5 → lg:grid-cols-4. Fix the description.

2. Layout orphan — 5 stat cards in a 4-column grid leaves 1 card alone on the last row at lg+ widths. Consider lg:grid-cols-5 (keeps 1 row) or restructure to 4 cards if avgFirstReviewHours is being removed.

3. Conflicts with #394 — both touch the same grid class on the same line in PRMetrics.tsx. Coordinate or rebase after #394 resolves.

[SaishWadnere]

Hey @Priyanshu-byte-coder,

Got it. I will work on changes.

One detail: on mobile (grid-cols-2), the 5th card still ends up alone on the bottom row (screenshot attached). Do you want me to leave it as-is for mobile, or should I make one column for mobile?