[BUG] PR Analytics metric cards squished/deformed on iPad Pro layout (1024px)

[SaishWadnere]

Describe the Bug

There’s a layout issue in the PR Analytics component on iPad Pro portrait mode. The four metric blocks are being forced into a single row inside a compressed container, causing the labels to wrap badly and break the alignment. A responsive layout adjustment is needed for better readability.

Steps to Reproduce

1. Open the DevTrack dashboard (/dashboard).
2. Open DevTools and switch to the iPad Pro (1024 x 1366) portrait view.
3. Look closely at how the 4 internal blue blocks inside the PR Analytics component are scaling.

Expected Behavior

When horizontal space shrinks, the internal layout of the component should adapt dynamically—either wrapping the 4 blocks into a clean 2x2 grid layout, or shrinking the padding and text scale cleanly without clipping/awkward wrapping.

Screenshots

Environment

• OS: Windows 11
• Browser: Chrome(latest)

[github-actions]

Thanks for opening your first issue on DevTrack! 🎉

A maintainer will take a look shortly. In the meantime:

• Check the Contributing guide if you are planning to work on this
• Browse Discussions for Q&A and ideas
• Look for good first issue if you want somewhere to start

[SaishWadnere]

Hi @Priyanshu-byte-coder
I would to contribute in this project under GSSoC 26.
please assign me the issue.