facebook / facebook/astryx

Resizable multi-panel layouts: ResizeHandle overlaps the adjacent panel scrollbar

Open
#4,732 2 comments 0 reactions 0 assignees View on GitHub
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** Image
> 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** Image
> 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.