Resizable multi-panel layouts: ResizeHandle overlaps the adjacent panel scrollbar
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
## Problem
In multi-panel layouts, the vertical scrollbar of a scrollable centre panel can occupy the same edge as the ResizeHandle between that panel and the right panel. The scrollbar visually competes with the handle and can make the resize affordance difficult to discover and drag.
This is easy to encounter in the AI Chat Conversations templates and in layouts similar to Tool: IDE: a scrollable conversation/document panel sits immediately next to a resizable right-side panel.
## Expected
The resize affordance should have its own consistently visible and clickable gutter, separate from the scroll rail. It should not be obscured by, or visually merge with, the centre panel scrollbar.
## Why it matters
Resizing is a core layout action. When the user cannot distinguish the handle from the scrollbar, they either miss that the panel is resizable or accidentally scroll instead of resizing.
## Suggested direction
Consider placing the ResizeHandle on the start edge of the following panel, or reserving a dedicated non-scrolling divider gutter between panels. The Tool: IDE template appears closer to this pattern; applying it consistently would avoid the overlap.
## Reproduction
1. Create a three-panel layout with a scrollable middle panel and a resizable right panel.
2. Add enough content to show the middle panel’s vertical scrollbar.
3. Inspect and drag the divider between the middle and right panels.
4. Observe the scrollbar and ResizeHandle competing for the same edge/hit area.
A screenshot or minimal reproduction can be supplied if useful.
## Screenshots from official templates
> **Image placeholder — AI Chat Conversations template**
> Upload the screenshot showing the centre conversation panel’s scrollbar visually competing with the resize divider on its right edge.
> **Image placeholder — Tool: IDE template**
> Upload the screenshot showing the same overlap between a panel scrollbar and the resize divider.
Both examples are from official Astryx templates, not a consumer-specific implementation.
Contributor guide
Research direction
Start by reproducing the overlap with a three-panel layout containing a scrollable centre panel and a resizable right panel, then compare the AI Chat Conversations and Tool: IDE templates. Trace the ResizeHandle and adjacent panel edges to identify the shared hit area. Done means the resize gutter remains visible and draggable without competing with the centre panel scrollbar.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100