Fixes #140#295
Conversation
Fixed overlapping text and UI elements in creator match cards by: - Converting AudienceMatchBar to vertical stack layout - Improving label/value spacing in CreatorStats - Reducing grid columns from 4 to 2 on large screens
📝 WalkthroughWalkthroughThe changes implement a compact view mode for the collaboration hub by introducing an optional Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx`:
- Around line 44-52: AudienceMatchBar renders an inconsistent progress state for
unknown audience labels: aria-valuenow falls back to 0 but the inner bar width
falls back to 50%, confusing assistive tech and visuals. Fix AudienceMatchBar by
computing a single numeric matchValue (e.g., 100, 75, 50, or 0) from
audienceMatch (use a small map or switch) and use that value both for
aria-valuenow and for the inline style width (e.g., `${matchValue}%`); keep
using getAudienceMatchColor(audienceMatch) for color only so unknown labels show
0% width and aria-valuenow=0 consistently.
In `@Frontend/src/pages/DashboardPage.tsx`:
- Line 193: The CollaborationsPage component defaults showHeader to true which
causes its sticky header to render inside the Dashboard card; update the
embedded instance (the <CollaborationsPage compact={true} /> usage) to
explicitly pass showHeader={false} so the header is disabled in the
compact/dashboard embed and prevents layout overlap.
| const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => ( | ||
| <div className="flex items-center gap-2 w-full justify-center mb-2"> | ||
| <span className="text-xs text-gray-500">Audience Match</span> | ||
| <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span> | ||
| <div className="flex-1 h-2 rounded bg-gray-200 mx-2 min-w-[60px] max-w-[80px]" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}> | ||
| <div className="w-full mb-3 space-y-2"> | ||
| <div className="flex items-center justify-between"> | ||
| <span className="text-xs text-gray-500">Audience Match</span> | ||
| <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span> | ||
| </div> | ||
| <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}> | ||
| <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} /> | ||
| </div> |
There was a problem hiding this comment.
Align progress width with the ARIA value for unknown audience labels.
When audienceMatch is unrecognized, aria-valuenow becomes 0 but the bar still renders at 50%. That’s inconsistent visually and for assistive tech.
✅ Suggested fix
-const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
+const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
+ const percent =
+ audienceMatch === "Very High" ? 100 :
+ audienceMatch === "High" ? 75 :
+ audienceMatch === "Good" ? 50 : 0;
<div className="w-full mb-3 space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500">Audience Match</span>
<span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
</div>
- <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
- <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} />
+ <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={percent} aria-valuemin={0} aria-valuemax={100}>
+ <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: `${percent}%` }} />
</div>
</div>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => ( | |
| <div className="flex items-center gap-2 w-full justify-center mb-2"> | |
| <span className="text-xs text-gray-500">Audience Match</span> | |
| <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span> | |
| <div className="flex-1 h-2 rounded bg-gray-200 mx-2 min-w-[60px] max-w-[80px]" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}> | |
| <div className="w-full mb-3 space-y-2"> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-xs text-gray-500">Audience Match</span> | |
| <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span> | |
| </div> | |
| <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}> | |
| <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} /> | |
| </div> | |
| const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => { | |
| const percent = | |
| audienceMatch === "Very High" ? 100 : | |
| audienceMatch === "High" ? 75 : | |
| audienceMatch === "Good" ? 50 : 0; | |
| return ( | |
| <div className="w-full mb-3 space-y-2"> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-xs text-gray-500">Audience Match</span> | |
| <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span> | |
| </div> | |
| <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={percent} aria-valuemin={0} aria-valuemax={100}> | |
| <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: `${percent}%` }} /> | |
| </div> | |
| </div> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In `@Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx` around lines
44 - 52, AudienceMatchBar renders an inconsistent progress state for unknown
audience labels: aria-valuenow falls back to 0 but the inner bar width falls
back to 50%, confusing assistive tech and visuals. Fix AudienceMatchBar by
computing a single numeric matchValue (e.g., 100, 75, 50, or 0) from
audienceMatch (use a small map or switch) and use that value both for
aria-valuenow and for the inline style width (e.g., `${matchValue}%`); keep
using getAudienceMatchColor(audienceMatch) for color only so unknown labels show
0% width and aria-valuenow=0 consistently.
Shevilll
left a comment
Shevilll
left a comment
There was a problem hiding this comment.
🌟 Code Review: Dashboard Layout and Match Cards Redesign
Great work addressing the overlapping text and card rendering issues in the Collaboration Hub! Breaking down CreatorMatchCard into smaller, focused subcomponents (CreatorStats and AudienceMatchBar) is a textbook-perfect refactoring practice. It makes the code much more readable and maintainable.
Here are two responsiveness and usability suggestions to polish this PR before merging:
1. 📱 Responsive Layout Regression in CreatorMatchGrid
In Frontend/src/components/collaboration-hub/CreatorMatchGrid.tsx, the grid layout was modified:
- <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 justify-items-center">
+ <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 justify-items-center">Why this is an issue:
While limiting the grid to a maximum of 2 columns works perfectly inside the narrow, embedded Dashboard Page card (compact={true}), it introduces a layout regression on the main Collaborations Page (compact={false}). On large desktop screens (lg:), the main page has plenty of screen width, and limiting the layout to only 2 columns leaves massive empty space and stretches the match cards awkwardly.
💡 Recommendation:
Make the column count dynamic based on where the grid is being rendered, or use Tailwind's container queries. Alternatively, pass a compact prop down to CreatorMatchGrid:
interface CreatorMatchGridProps {
creators: Creator[];
compact?: boolean; // Add optional compact prop
}
const CreatorMatchGrid: React.FC<CreatorMatchGridProps> = ({ creators, compact = false }) => {
...
return (
<div className={`grid gap-6 justify-items-center ${
compact
? "grid-cols-1 sm:grid-cols-2"
: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
}`}>
{currentCreators.map((creator) => (
<CreatorMatchCard key={creator.id} {...creator} />
))}
</div>
);
};(This gives you the best of both worlds: a tight 2-column grid in the compact dashboard view, and a rich, spacious 4-column grid on the main page!)
2. 🔍 Accessibility / Usability on Truncated Text
In CreatorStats, you added truncate to the content span:
<div className="space-y-1">
<span className="font-semibold block">Content</span>
<span className="block truncate">{content}</span>
</div>Why this is an issue:
Truncation looks visually clean, but it completely hides any truncated words from the user with no way of viewing them on hover.
💡 Recommendation:
Add a title attribute so that users can hover over the truncated element to view the full value via native browser tooltips:
<div className="space-y-1">
<span className="font-semibold block">Content</span>
<span className="block truncate" title={content}>{content}</span>
</div>Excellent work polishing the layout! Fixing the 4-column desktop view for the main page will make this layout overhaul perfect. Let me know what you think! 🚀
2 participants
Fixed overlapping text and UI elements in creator match cards by:
Closes #
📝 Description
🔧 Changes Made
📷 Screenshots or Visual Changes (if applicable)
🤝 Collaboration
Collaborated with:
@username(optional)✅ Checklist
Summary by CodeRabbit
Release Notes
New Features
Improvements