BUG: Dashboard layout overlaps and misalignment in Collaboration & Sponsorship sections

[aniket866]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

@Saahi30 , I have suggest some improvement please assign me this issue, eager to solve this issue

📌 Issue Overview

The Dashboard page layout is breaking — the Creator Collaborations and AI-Matched Sponsorships sections are misaligned and overlapping on the right side.
This makes the UI unreadable and distorts the grid layout when viewing on desktop (1366×768).

The issue persists even after multiple reloads and is not caused by component data (the rendering logic is fine; it’s a layout issue).

🔍 Steps to Reproduce

Run the frontend locally (npm run dev or pnpm dev).

Navigate to: http://localhost:5173/dashboard.

Scroll down to the AI-Matched Sponsorships and Creator Collaborations sections.

Observe the overlapping cards and layout shift (collaboration profiles stacked incorrectly).

🎯 Expected Behavior

after_dashboard_update.webm

🚨 Actual Behavior

Sections overlap horizontally and vertically.

Collaboration profiles overflow the card container.

“View Profile” and “Connect” buttons stack outside visible boundaries.

The right section scrolls horizontally, breaking dashboard alignment.

dashboard.update.webm

📷 Screenshot

after_dashboard_update.webm

💡 Suggested Improvements

• Redesign dashboard layout using stacked (vertical) orientation instead of side-by-side grid (grid-cols-7 → space-y-*).

• Apply consistent max-width constraints on SponsorshipMatches and CollaborationsPage cards.

• Add a parent container with overflow-hidden and flex-col to prevent scroll bleed.

• Test across resolutions (1366×768, 1920×1080, 1440×900).

• Introduce vertical “card stack” layout with section spacing (space-y-8).a

Record

• I agree to follow this project's Code of Conduct
• I want to work on this issue

[Saahi30]

@aniket866 Looks good....assigning

[aniket866]

@Saahi30 ,

Task done and you can merge this one: #142