fixing the text collapse in pop up

[rahul-vyas-dev]

Closes #192

📝 Description

This pull request fixes the UI issue where, after clicking “Send Request”, the confirmation popup appears but the text inside is collapsed and not aligned properly. The popup content does not render with correct spacing or layout, causing the text to overlap and appear visually broken. This PR adjusts the styling so the popup displays the message clearly and consistently.

🔧 Changes Made

fixed text alignment issues inside the popup.
Ensured the popup content no longer collapses after request submission.
Improved overall UI consistency for the request confirmation modal

📷 Screenshots or Visual Changes (if applicable)

before

after

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works.
• I have added necessary documentation (if applicable).
• Any dependent changes have been merged and published in downstream modules.

Summary by CodeRabbit

• Bug Fixes
  • Improved the display of "Request Sent!" notification to properly adapt to content width.

[coderabbitai]

Walkthrough

A minor CSS adjustment to the "Request Sent!" notification in the CreatorMatchCard component adds the w-max class to a div element, changing its width behavior to shrink-to-fit content while preserving aria-live attributes and existing styles.

Changes

Cohort / File(s)	Change Summary
Request Sent Notification Fix Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx	Added w-max class to notification div to prevent text collapse in "Request Sent!" popup

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

• Single-line CSS class addition with no logic or behavioral changes
• Visual-only fix targeting layout issue in notification element

Poem

🐰 A tiny fix with CSS flair,
The popup text now fits with care,
No more collapse, no more despair,
w-max brings the width back square!
✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change in the PR—fixing text collapse in a popup—which aligns with the changeset that adds a w-max class to fix layout issues.
Linked Issues check	✅ Passed	The PR successfully addresses the linked issue #192 by applying a CSS class (w-max) to fix text collapsing and misalignment in the confirmation popup after request submission.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to the CreatorMatchCard component's notification div, directly addressing the popup text collapse issue without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3be437 and cecf470.

📒 Files selected for processing (1)

• Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx (1 hunks)

🔇 Additional comments (1)

Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx (1)

112-112: CSS fix correctly addresses text collapse issue. ✓

The addition of w-max applies width: max-content to the notification, constraining it to fit its content and preventing the text collapse/wrapping reported in issue #192. The transform-based centering logic (left-1/2 -translate-x-1/2) should continue to work correctly with this width constraint.

Please verify the following to confirm the fix works as intended:

1. Visual verification: Confirm the "Request Sent!" notification displays clearly without text collapse on desktop and mobile viewports
2. Centering behavior: Ensure the notification remains properly centered after applying w-max
3. Edge cases: Test with slightly longer notification text (if that's ever needed in the future) to ensure the constraint doesn't cause issues

If you'd like, I can generate a verification script to inspect the applied styles.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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