fix: wrap Listening card chips when they overflow on mobile

[kaiiiichen]

Summary

• Fix mobile layout where the music for life chip was clipped by the Listening card's overflow: hidden.
• Replace the non-shrinking horizontal chip row with a flex-wrap container so chips wrap when they hit the right edge.
• When wrapped, music for life stacks directly below last month's tops (shared left alignment).

Test plan

• npm run lint && npm run typecheck && npm run test && npm run build
• On a narrow mobile viewport, confirm both chips fit or wrap without clipping
• On wider screens, confirm chips still sit on one row at the right of the status line

  

Summary by CodeRabbit

• Style
  • Improved the layout of the listening card’s status and right-side content so text truncates more cleanly and elements wrap better on smaller widths.
  • Kept key badges and indicators from shrinking, helping the card stay readable and balanced across different screen sizes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kaichen.dev	Ready	Preview, Comment	Jul 5, 2026 5:36pm

[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: 3bf506ec-219d-4900-a087-539410d9b4d2

📥 Commits

Reviewing files that changed from the base of the PR and between 3a57dc5 and 83d329d.

📒 Files selected for processing (1)

• app/components/listening-card.tsx

---

📝 Walkthrough

Walkthrough

This change adjusts Tailwind CSS classes in the ListeningCard component, modifying the status text container to support truncation with shrink behavior, and converting the trailing content row from a fixed non-wrapping layout to a wrapping flex layout with explicit shrink-0 controls on child elements.

Changes

Listening Card Layout

Layer / File(s)	Summary
Status text and trailing content wrapping app/components/listening-card.tsx	Status text span gains min-w-0/shrink alongside existing tracking-widest truncate; trailing container switches from flex items-center shrink-0 to flex flex-wrap min-w-0 max-w-full, with ListeningLastMonthTop wrapped in a shrink-0 div and MagChip given className="shrink-0".

Estimated code review effort: 1 (Trivial) | ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main fix: wrapping Listening card chips on mobile overflow.
Description check	✅ Passed	The PR body includes a solid Summary and Test plan, but it omits the template's Type of change, Related issues, and Checklist sections.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/listening-chips-wrap-a9f8

---

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.}