Fix issue #5965: [Bug]: Misc UI issues due to resizable and collapsible panel

[openhands-agent]

This PR fixes an issue with the resizable panel component where the right panel would overflow outside the browser border when the left chat panel is expanded to its maximum width (50%).

Changes made:

• Changed right panel width constraints from fixed pixels to proportional values:
  • minWidth changed from 600px to 30%
  • Added maxWidth: "70%" to ensure the panel stays within bounds
• Keeps existing left panel constraint of maxWidth: "50%"

These changes ensure:

1. The right panel maintains a reasonable size relative to the window width
2. The panels never overflow outside the browser window
3. The layout remains responsive across different screen sizes

The changes have been tested locally and all tests pass.

---

To run this PR locally, use the following command:

docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:5728549-nikolaik   --name openhands-app-5728549   docker.all-hands.dev/all-hands-ai/openhands:5728549

[xingyaoww]

The code changes so far do fix the issue when I open OpenHands in a weird aspect ratio screen that I used to do.

It looks good on a large screen.

However, I'm still able to drag each panel to be very small and make it doesn't look good.

@openhands-agent Can you look into it?

[openhands-agent]

OpenHands started fixing the pr! You can monitor the progress here.

[openhands-agent]

Status Overview:

✅ Progress Made:

• Implemented minimum/maximum constraints
• Set default ratios

❌ Remaining Issues:

1. Chat panel can still be compressed to unusable width
2. Terminal can still be resized too small

Recommended Next Steps:

1. Verify constraint implementation
2. Increase minimum size thresholds
3. Test constraint enforcement

Summary: While initial improvements were made, the core usability issues persist. Further adjustments to the implementation are needed to fully resolve the panel sizing problems.

[xingyaoww]

You should first read the "diff" against main to understand existing implementation, then check the history of this thread.

[openhands-agent]

OpenHands started fixing the pr! You can monitor the progress here.

[openhands-agent]

Concise Overview:

Status: PARTIALLY RESOLVED with remaining issues

Completed:
✓ Implementation of size constraints
✓ Set default ratios

Remaining Issues:

• Panels can still be resized to unusably small dimensions despite constraints
• Visual appearance is compromised at certain sizes

Next Steps Required:

1. Debug constraint enforcement
2. Validate constraint implementation
3. Conduct comprehensive testing across screen sizes

Recommendation: Issue should remain open until panel sizing behavior is fully fixed and verified.

[xingyaoww]

OpenHands you need to run npm run lint:fix to fix linter error

[openhands-agent]

OpenHands started fixing the pr! You can monitor the progress here.

[openhands-agent]

Summary of Issue Status:

UNRESOLVED - Panel Sizing Issues

Current State:

• Changes were made to address panel sizing
• No visual confirmation provided
• Previous feedback indicated persistent issues
• Lack of verification testing

Required for Resolution:

1. Visual proof of proper panel sizing
2. Multi-screen size layout testing
3. Constraint validation testing
4. Reviewer verification

Recommendation:
Request visual evidence and testing confirmation before marking as resolved.

[xingyaoww]

OpenHands -- resize the box will actually change the min-width. The current setup doesn't really prevent the panel from being resized too much. Can you help?

[openhands-agent]

OpenHands started fixing the pr! You can monitor the progress here.

[openhands-agent]

Status Summary:

UNRESOLVED - Panel Sizing Issues

Key Points:

• Changes were proposed but not confirmed to work
• Missing crucial verification:
  • No visual proof
  • No reviewer approval
  • No confirmation of min-width fix
• Historical context shows previous failed attempts

Recommendation:
Keep issue open pending:

1. Implementation verification
2. Reviewer confirmation
3. Specific proof that min-width constraint works as intended

[xingyaoww]

ok OpenHands - this looks MUCH better!

Now there are several issues:

1. The right side seems to go out of the browser window

2. When we try to make the terminal panel larger, it didn't resize the terminal with the panel

3. Minor nit: I want the left chat panel to max at max-width 50%, right now the max is a little small.

[openhands-agent]

OpenHands started fixing the pr! You can monitor the progress here.

[openhands-agent]

Status Overview:

Pending Issues:

• Right side panels extending beyond browser window
• Terminal panel resizing problems
• Chat panel max-width adjustment to 50%

Current State:
While changes have been implemented, there is no reviewer confirmation that the fixes are working as intended. Multiple previous attempts to resolve these issues were unsuccessful.

Recommendation:
Await reviewer verification before considering these issues closed. Visual confirmation is needed to ensure:

1. Panel containment within browser
2. Proper terminal resizing
3. Correct chat panel width

Overall Status: UNRESOLVED - Pending reviewer confirmation

[xingyaoww]

The terminal is a little better but it still didn't fill all the pane space.

The right side of the panel still goes beyond the edge of the browser window.

[openhands-agent]

OpenHands started fixing the pr! You can monitor the progress here.

[openhands-agent]

Status Overview:

❌ UNRESOLVED ISSUES:

1. Terminal not filling allocated space
2. Right panel extending beyond browser window

NEXT STEPS REQUIRED:

• Implement proper terminal scaling
• Add boundary constraints for right panel
• Provide visual proof of fixes

SUMMARY:
The attempted fixes were unsuccessful, with core functionality issues still present. Visual evidence confirms the problems persist. Further development work needed before requirements can be considered met.

[xingyaoww]

Can't get this to work well 😓 gonna close this for now