Fix long chat names overflowing Project Details on mobile

[devin-ai-integration]

Summary

Fixes #475. Long chat names in the Project Details view caused the page to extend beyond the mobile viewport, requiring horizontal scrolling. The same issue occurred on desktop when the browser window was narrowed.

The root cause was overflow at multiple levels of the container hierarchy:

1. Inner flex container (chat title row): Missing min-w-0, so truncate on the span couldn't constrain text in a flex context.
2. Grid layout: On mobile, no explicit grid-template-columns was set. Grid items default to min-width: auto, allowing content to push beyond the viewport. Fixed by adding grid-cols-[minmax(0,1fr)] (matching the existing lg breakpoint pattern).
3. Chats card container: As a direct grid item (via contents), it also needed min-w-0 overflow-hidden to clip overflowing content.
4. Scrollable area: Added overflow-x-hidden to prevent any horizontal scroll from appearing.
5. Contents/block wrapper: At the lg breakpoint, the wrapper switches from contents to block and becomes a grid item — added lg:min-w-0 lg:overflow-hidden to prevent it from growing beyond the grid column width.

Review & Testing Checklist for Human

• Open the Project Details screen on a mobile device (or responsive mode ~375px) with a chat that has a very long name — verify the title truncates with ellipsis and no horizontal scroll appears
• On desktop, drag the browser window narrower and verify no horizontal overflow occurs at any width
• Verify pinned chat icon still displays correctly next to truncated titles
• On desktop/large screens, verify the two-column layout (chats + custom instructions) still renders correctly

Notes

All changes are in ProjectDetailView.tsx — overflow constraints added at 5 container levels to fully prevent horizontal overflow at all viewport sizes.

Link to Devin session: https://app.devin.ai/sessions/3d60ee76bbd84b0891a96799c57d5f78
Requested by: @marksftw

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	2c91f62
Status:	✅  Deploy successful!
Preview URL:	https://3baf8ae2.maple-ca8.pages.dev
Branch Preview URL:	https://devin-1776199869-fix-project.maple-ca8.pages.dev

View logs

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[marksftw]

Problem still exists. See screenshot.

[devin-ai-integration]

Thanks for the screenshot — I see the overflow is still happening. The min-w-0 on the inner flex wasn't enough because the card container itself (a grid item via contents) isn't constrained either. I'll add overflow-hidden and min-w-0 to the chats card container to fully fix this.

[marksftw]

Works correctly on Mobile. I noticed on desktop web if I drag the width smaller the problem is exhibited there. Can you fix it for that too? Here is a screenshot.

[devin-ai-integration]

Mobile fix confirmed, thanks! I see the issue on desktop at narrower widths — the lg breakpoint (1024px) switches from contents to block layout, so between ~768px-1024px the two-column grid is active but the container is too narrow. I'll fix this now.

[marksftw]

it works on both mobile and desktop web.