better-park-34863
07/11/2025, 12:03 PMbetter-park-34863
07/11/2025, 12:06 PMwooden-umbrella-84098
07/11/2025, 1:44 PMnarrow-agent-26548
07/11/2025, 1:44 PMwooden-umbrella-84098
07/11/2025, 1:45 PMnarrow-agent-26548
07/11/2025, 1:56 PMnpm install with many packages) or long file paths were being truncated instead of wrapping properly, making them difficult to read.
Root Cause
The issue was in the flex layout of two components:
• GenericEventMessage component
• ExpandableMessage component
Both used justify-between flex layout but lacked proper text wrapping classes for the title containers.
Solution Implemented
Added three CSS classes to the title containers:
• `flex-1`: Allows title to take up available space
• `min-w-0`: Allows flex item to shrink below content size
• `break-words`: Enables word breaking for long text
Changes Made
• File 1: frontend/src/components/features/chat/generic-event-message.tsx - Added classes to title div
• File 2: frontend/src/components/features/chat/expandable-message.tsx - Added classes to title span
Only 2 lines changed total - a minimal, targeted fix.
Verification
• ✅ All frontend tests pass (441 tests)
• ✅ Pre-commit hooks and linting pass
• ✅ Manual testing confirms long text now wraps properly
• ✅ Success indicators remain visible on the right
• ✅ No impact on existing functionality
Pull Request Created
I've created a draft pull request with the fix: https://github.com/All-Hands-AI/OpenHands/pull/9665
The fix ensures that long commands and file paths in action titles now wrap properly instead of being cut off, resolving the UI regression on main.