Enhancement: Improve Status Board Layout Using Responsive Multi-Row Card Grid

[dnyaneshwari44]

Description

Summary

The current Status Board displays all five status cards (Applied, Shortlisted, Interviewed, Selected, and Rejected) in a single horizontal row. This causes unnecessary horizontal scrolling on desktop screens and makes the layout appear stretched and visually unbalanced.

A more organized layout would improve usability by arranging the cards into multiple rows while maintaining responsiveness across different screen sizes.

Current Behavior

• All five status cards are displayed in a single horizontal row.
• The last card is partially hidden on standard desktop screens.
• Users need to scroll horizontally to view all cards.
• The layout feels stretched and leaves unused vertical space.

Expected Behavior

• Display the cards in a responsive grid layout.
• Desktop: 3 cards in the first row and 2 cards in the second row.
• Tablet: 2 cards per row.
• Mobile: 1 card per row.
• Remove unnecessary horizontal scrolling.
• Maintain consistent spacing, alignment, and card dimensions.

Steps to Reproduce

1. Open the Status Board page.
2. Observe the arrangement of the status cards.
3. Notice that all cards are placed in a single horizontal row.
4. Observe that the last card is partially hidden and requires horizontal scrolling.

Screenshots

Impact

• Improves dashboard readability.
• Better utilizes available screen space.
• Eliminates unnecessary horizontal scrolling.
• Creates a cleaner and more balanced UI.
• Enhances responsiveness across desktop, tablet, and mobile devices.

Suggested Implementation

• Replace the current horizontal layout with a responsive CSS Grid.

• Configure the layout to display:

  • Desktop: 3 columns (remaining cards wrap naturally to the next row).
  • Tablet: 2 columns.
  • Mobile: 1 column.

• Maintain consistent spacing and equal card widths.

• Ensure the layout adapts smoothly across different screen sizes.

Additional Notes

This enhancement focuses only on improving the visual layout and responsiveness of the Status Board without changing its existing functionality.

Type: Enhancement (UI/UX)

Suggested Labels: enhancement, ui/ux, responsive, good first issue

[dnyaneshwari44]

Hi @Venkat-Kolasani ,

I would like to work on this enhancement.

Implementation Plan

• Replace the current single-row layout with a responsive CSS Grid.
• Arrange the cards in a balanced 3 + 2 layout on desktop.
• Add responsive breakpoints for tablet (2 columns) and mobile (1 column).
• Remove unnecessary horizontal scrolling.
• Maintain consistent spacing, alignment, and card sizing across all screen sizes.

This enhancement will improve the overall visual hierarchy, responsiveness, and user experience of the Status Board.

Kindly assign this issue to me.

Thank you!

/assign
/claim
Under GSSoC-2026

[Venkat-Kolasani]

@dnyaneshwari44 — your plan (CSS Grid 3+2 desktop, 2/1 tablet/mobile, remove horizontal scroll in StatusBoard.jsx) looks good and matches the issue scope. (merging is decided on how improved the ui-ux is)

Assigning you now. Please confirm you're still available and open a draft PR when ready.

[dnyaneshwari44]

Thanks for the assignment!
I'm still available and will start working on it.
I'll open a draft PR once the initial implementation is ready for review.