enhancement: replace horizontal scrolling with responsive status board grid

[dnyaneshwari44]

Summary

Improves the Status Board layout by replacing the single-row horizontal layout with a responsive CSS Grid. This enhancement removes unnecessary horizontal scrolling, provides a balanced multi-row layout across different screen sizes, and preserves all existing Kanban functionality.

Fixes #67

Type of change

• Bug fix
• New feature
• Refactor (no behavior change)
• Documentation

Changes made

• Updated src/pages/StatusBoard.jsx to replace the horizontal flex layout with a responsive CSS Grid for improved multi-row responsiveness.
• Updated src/components/statusboard/StatusColumn.jsx to remove fixed-width constraints, allowing columns to resize responsively within the grid layout.
• Eliminated unnecessary horizontal scrolling on desktop screens while maintaining a balanced layout across desktop, tablet, and mobile devices.
• Preserved all existing Status Board functionality, including status updates, drag-and-drop behavior, and opportunity management.

Test plan

• npm run test:ci passes (frontend)
• cd backend && npm test passes (if API/backend changed)
• Backend tests added/updated (if API changed)
• npm run check:architecture passes locally
• Tested locally with backend running (cd backend && npm run dev)
• Signed in and smoke-tested the Status Board page
• Checked mobile / responsive layout
• No secrets or .env files committed

Screenshots / recording

Before

• All five status columns were displayed in a single horizontal row.
• Horizontal scrolling was required on desktop screens.

After

• Desktop: Three responsive columns in the first row with remaining columns wrapping naturally to the second row.

• Tablet: Two responsive columns per row.

• Mobile: Single-column stacked layout.

• Horizontal scrolling removed while maintaining consistent spacing and alignment.

Checklist

• PR addresses one assigned issue only
• Acceptance criteria from the issue are met
• Follows existing code style and patterns in this repo
• Database migrations added under docs/ if schema changed (Not applicable)
• No console.log debug noise left behind
• Read [docs/TESTING.md](docs/TESTING.md) if unsure what CI expects

Summary by CodeRabbit

• UI/Layout Improvements
  • Updated the status board to use a responsive CSS grid layout instead of horizontal scrolling, improving how columns wrap across screen sizes.
  • Changed status columns to better use available width for more consistent alignment.
  • Refined the status list’s vertical space by adjusting its min/max height constraints for a more compact set of visible status cards.

[vercel]

@dnyaneshwari44 is attempting to deploy a commit to the venkat-kolasani's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d8e7d39f-81dc-44e1-8dae-25e3a1b25009

📥 Commits

Reviewing files that changed from the base of the PR and between e35a49b and 1f281a4.

📒 Files selected for processing (1)

• src/pages/StatusBoard.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/pages/StatusBoard.jsx

---

📝 Walkthrough

Walkthrough

StatusBoard replaces its horizontal-scroll flex container with a pb-4 wrapper and a responsive CSS grid. StatusColumn updates its outer div to w-full and reduces its scrollable height range.

Changes

StatusBoard Responsive Grid Layout

Layer / File(s)	Summary
Grid layout and column sizing src/pages/StatusBoard.jsx, src/components/statusboard/StatusColumn.jsx	StatusBoard swaps the overflow-x-auto flex row for a responsive CSS grid (grid-cols-1 md:grid-cols-2 xl:grid-cols-3) inside a pb-4 wrapper. StatusColumn changes from flex-shrink-0 w-72 sm:w-80 to w-full, and its scrollable area height is lowered from min-h-[400px] max-h-[600px] to min-h-[350px] max-h-[550px].

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 Hop, hop, the board looks bright and wide,
Cards now wrap in rows with space to stride.
Taller? Shorter? Just the right gentle tune,
A tidy little grid beneath the moon.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main UI change: replacing horizontal scrolling with a responsive grid layout.
Description check	✅ Passed	The description matches the template well, including summary, change type, file list, test plan, screenshots, and checklist.
Linked Issues check	✅ Passed	The changes satisfy #67 by using a responsive grid with 3/2/1 columns, removing horizontal scrolling, and keeping the board behavior intact.
Out of Scope Changes check	✅ Passed	The PR appears scoped to the Status Board layout update, with no obvious unrelated or extra changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/StatusBoard.jsx`:
- Line 198: The grid layout in StatusBoard should switch to three columns at the
desktop breakpoint instead of waiting for extra-large screens. Update the grid
classes on the main board container in StatusBoard so the 3-column layout uses
the desktop breakpoint while keeping the 2-column layout for tablet sizes, and
keep the existing responsive structure intact.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: afdc8218-0271-4bf5-9996-d91953cb2057

📥 Commits

Reviewing files that changed from the base of the PR and between 069b43d and c9f6e2f.

📒 Files selected for processing (2)

• src/components/statusboard/StatusColumn.jsx
• src/pages/StatusBoard.jsx