#9411: Fix: Web UI long message overflow causing unreadable text

## Summary Fixes the issue where long messages became unreadable in the Web UI when they exceeded the window size. ## Problem When messages grew beyond the window size, they would overflow the container and become unreadable, as shown in issue #9399. ## Root Cause 1. The `.chat-bubble` container lacked proper overflow handling - text could overflow horizontally 2. Pre-formatted code blocks (`<pre>` elements) had no max-width constraint, allowing them to expand beyond the viewport ## Solution Added proper CSS constraints to ensure messages stay within their containers: 1. **ui/src/styles/chat/grouped.css**: - Added `overflow: hidden` to `.chat-bubble` to prevent content from spilling out - Added `overflow-wrap: break-word` to ensure long words break properly 2. **ui/src/styles/chat/text.css**: - Added `max-width: 100%` to `pre` blocks to prevent horizontal overflow - Code blocks now scroll horizontally within their container when needed ## Testing The fix ensures that: - Long continuous text wraps properly within message bubbles - Code blocks with long lines display with horizontal scroll rather than breaking layout - Message containers respect their parent's width constraints Fixes #9399 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts chat CSS to keep long messages readable by adding wrapping/overflow constraints to `.chat-bubble` and ensuring `<pre>` blocks don’t exceed their container. The changes apply to the grouped chat layout (`ui/src/styles/chat/grouped.css`) and markdown/text rendering styles (`ui/src/styles/chat/text.css`), which are used by the grouped chat renderer (`ui/src/ui/chat/grouped-render.ts`) when it wraps sanitized markdown output inside `.chat-bubble` / `.chat-text`. <h3>Confidence Score: 4/5</h3> - Mostly safe to merge, but a CSS overflow change likely breaks code-block scrolling in chat bubbles. - The PR is small and localized to CSS, but `overflow: hidden` on the bubble is very likely to clip `<pre>` horizontal overflow/scrollbars, which conflicts with the stated fix and can reintroduce unreadable long code blocks. - ui/src/styles/chat/grouped.css <!-- greptile_other_comments_section --> **Context used:** - Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8)) - Context from `dashboard` - AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=0d0c8278-ef8e-4d6c-ab21-f5527e322f13)) <!-- /greptile_comment -->