Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add draggable and collapsible panels to the UI layout #5918

Closed
wants to merge 2 commits into from

Conversation

tofarr
Copy link
Collaborator

@tofarr tofarr commented Dec 30, 2024

This PR adds draggable and collapsible functionality to the panels in the UI layout:

  • Added react-resizable-panels package
  • Created a new CSS module for styling the resize handle
  • Made the left panel (ChatInterface) resizable and collapsible
  • Added visual feedback for the resize handle
  • The left panel has a min size of 15% and max size of 50% of viewport width
  • The right panel automatically adjusts its size as the left panel is resized

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:55d4684-nikolaik   --name openhands-app-55d4684   docker.all-hands.dev/all-hands-ai/openhands:55d4684

@tofarr tofarr marked this pull request as draft December 30, 2024 16:06
@tofarr tofarr closed this Dec 30, 2024
@tofarr tofarr deleted the feature/draggable-panels branch December 30, 2024 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants