fix: Update project name styling in chat header for better readability

[tyler-builds]

What Changed

I added justify-start so it only truncates the right side, removed the max-w-28 so it can grow if there is space, and changed shrink-0 to shrink so if the screen does get small it shrinks with everything else (like the thread title).

Fixes #713

Why

If a project name was long enough, it would be cut off even if there was room to see the whole thing. Also, due to the default styling for the Badge component, it would truncate both the left and right side leaving only the middle to be read.

UI Changes

Before (large screen)

After (large screen)

Before (small screen)

Before (small screen)

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Adjust ChatHeader project name Badge flex styling to improve readability in ChatView.tsx

Update the ChatHeader Badge showing activeProjectName: remove max-w-28 and shrink-0; add justify-start and shrink in ChatView.tsx.

📍Where to Start

Start with the ChatHeader component in ChatView.tsx.

^{Macroscope summarized 6f349e5.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b7ab03cb-93da-4879-95ad-5f4641aafd97

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

[maria-rcks]

#723