feat: allow resizing/collapsing source/selected element panels #2196
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements resizable and collapsible panels for the source tree and selected element panels in the Session Inspector using Ant Design's Splitter component. The changes improve the user interface by allowing dynamic layout adjustment and better space utilization.
- Replaces fixed 50/50 split layout with resizable splitter panels that can be collapsed
- Sets fixed column widths for selected element tables to improve visual consistency
- Increases the width of the send keys input field for better usability
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| Inspector.jsx | Replaces div-based layout with Ant Design Splitter component and configures panel sizing |
| Inspector.module.css | Refactors CSS classes, removes legacy layout styles, and adjusts component styling |
| SelectedElement.jsx | Adds fixed width constraints to table columns for consistent spacing |
| main.css | Adds global styling for splitter bar margins |
| @@ -105,6 +105,7 @@ const SelectedElement = (props) => { | |||
| dataIndex: 'name', | |||
| key: 'name', | |||
| fixed: 'left', | |||
| width: 150, | |||
There was a problem hiding this comment.
The hardcoded width value of 150 should be defined as a CSS variable or constant to improve maintainability and consistency across the codebase.
| width: 150, | |
| width: ATTRIBUTE_COLUMN_WIDTH, |
Copilot uses AI. Check for mistakes.
| @@ -134,6 +135,7 @@ const SelectedElement = (props) => { | |||
| dataIndex: 'find', | |||
| key: 'find', | |||
| fixed: 'left', | |||
| width: 150, | |||
There was a problem hiding this comment.
The hardcoded width value of 150 is duplicated from line 108. This should be defined as a CSS variable or constant to avoid duplication and ensure consistency.
Copilot uses AI. Check for mistakes.
This PR adds support for resizing and collapsing of the source and selected element panels shown in the Session Inspector, as suggested in #766.
I've also set a fixed width for the fixed columns in the selected element tables (they leave too much blank space until the next column, which looks even worse if the source panel is collapsed), as well as increased the width of the send keys input field.
Here is a brief demo:
draggable.mp4