Seems like a UI regression on main. These types of...
# proj-agent-canvas
b
Seems like a UI regression on main. These types of actions get cut off
Here's a better screenshot
w
@nutritious-balloon-65098 pls fix
n
I'm on it! Robert Brennan can track my progress here.
w
i'm actually not sure if it'll see the screenshots but 👀
n
Summary I successfully identified and fixed the UI regression where action titles were getting cut off in the OpenHands chat interface. Problem Identified Action titles containing long commands (like
npm 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.