Variant A — Close button in panel header + thin overlay scrollbar
The most common pattern. Removes the edge conflict entirely.
How it works: The collapse control moves into the panel header (an × or chevron). The scrollbar is styled thin (6px) and overlays the content rather than taking layout space. When closed, a subtle tab appears at the edge to reopen.
Tradeoff: The close button is slightly less discoverable than an edge toggle, but much cleaner. This is what Figma, Linear, and most modern tools do.
Variant B — Thin rail separator with integrated toggle
A persistent narrow rail between panes holds the toggle. No edge conflict possible.
How it works: A 20px "rail" strip sits between the main content and the panel. It holds a small chevron toggle at the top. The scrollbar lives inside the panel, fully separated from the toggle.
Tradeoff: Uses a tiny bit of horizontal space for the rail, but completely eliminates the scrollbar-vs-toggle collision. Good for apps with lots of resizable panels (VS Code does a version of this).
Variant C — Hover-reveal scrollbar + floating collapse pill
Maximum clean look. Scrollbar and collapse button only appear on hover.
How it works: The scrollbar is invisible until you hover over the panel. The collapse button is a floating circle on the panel edge — also only visible on hover over the container. This is closest to the Notion / Linear side-peek pattern.
Tradeoff: Very clean at rest, but both affordances are hidden. Users may not discover the collapse button without exploring. Best if the panel is non-essential and collapsing it is a "nice to have."
Variant D — Resizable drag handle (double-click to collapse)
Power-user pattern. The divider IS the control — drag to resize, double-click to collapse.
How it works: A drag handle replaces the static border. Dragging resizes the panel; double-clicking collapses it entirely. A subtle dot indicator shows it's interactive. The scrollbar is fully inside the panel, separated from the handle.
Tradeoff: Very flexible and space-efficient, but the collapse gesture is completely hidden — you need a tooltip or onboarding hint. This is what VS Code and many IDEs use. Often paired with a View menu toggle as a fallback.
AllGroupsInsights
Double-click divider to collapse