fix: reclaim full space when sidebar collapsed on Messages and Map#2368
fix: reclaim full space when sidebar collapsed on Messages and Map#2368
Conversation
Collapsed sidebar now shrinks to width 0 instead of 48px, with the expand button floating as a small icon overlay in the top-left corner of the content area. Applies to both Map (nodes-anchored-sidebar) and Messages (messages-sidebar) tabs, including mobile responsive styles. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| width: 48px !important; | ||
| min-width: 48px; | ||
| max-width: 48px; | ||
| width: 0 !important; |
There was a problem hiding this comment.
✅ Excellent change! Reducing collapsed width from 48px to 0 properly reclaims the full space. The overflow: visible is crucial to ensure the floating expand button remains accessible.
| transition: width 0.3s ease; | ||
| } | ||
|
|
||
| .messages-sidebar.collapsed { |
There was a problem hiding this comment.
✅ Great addition! The Messages sidebar was missing collapse CSS entirely - this fixes a significant UX gap. Adding the smooth transition maintains consistency with the Map sidebar behavior.
| @@ -554,16 +563,20 @@ | |||
| } | |||
|
|
|||
| .nodes-sidebar.collapsed .sidebar-header { | |||
There was a problem hiding this comment.
✅ Smart positioning solution! Moving the collapsed header to absolute positioning with proper z-index (1000) creates a clean floating expand button. The box-shadow on line 579 adds nice visual depth.
| /* When collapsed on mobile, show as small strip */ | ||
| /* When collapsed on mobile, reclaim all space */ | ||
| .nodes-anchored-sidebar.collapsed { | ||
| position: static; |
There was a problem hiding this comment.
✅ Consistent mobile implementation! Good that you applied the same 0-width approach to mobile collapsed state. This ensures consistent behavior across all device sizes.
1 participant
Summary
When collapsing the sidebar on Messages or Map tabs, the sidebar now shrinks to 0 width instead of leaving a 48px dead space column. The expand button floats as a small icon overlay in the top-left corner of the content area.
Changes
Files Changed
src/styles/nodes.cssTest plan
🤖 Generated with Claude Code