[PR #6965] Add gutter to Command Palette to avoid overlapping with scrollbar #26828

Closed
opened 2026-01-31 09:18:22 +00:00 by claunia · 0 comments
Owner

Original Pull Request: https://github.com/microsoft/terminal/pull/6965

State: closed
Merged: Yes


The command palette has some content that can overlap with its
scrollbar. This PR adds a 16px gutter for the scrollbar, as recommended
here.

Detailed Description of the Pull Request / Additional comments

You can repro the overlap in the default configuration by grabbing the
scrollbar with the mouse pointer. But there's an accessibility option
that makes this more obvious: Settings > Display > Automatically hide
scroll bars. With that option enabled, the text is always
overlapping.

The gutter does look slightly larger than it needs to be when the
scrollbar is thin or completely hidden. Dynamic reflow may help, but
unfortunately, I don't know enough XAML to wire that up. MUX has a
promising visual state named ScrollBarsSeparatorExpanded, so the
scientists suggest we could, while the designers are still pondering
whether we should.

Validation Steps Performed

Old appearance:
image

New appearance with fat scrollbars:
image

New appearance with thin scrollbars:
image

New appearance with no scrollbar:
image

**Original Pull Request:** https://github.com/microsoft/terminal/pull/6965 **State:** closed **Merged:** Yes --- The command palette has some content that can overlap with its scrollbar. This PR adds a 16px gutter for the scrollbar, as recommended [here](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls#:~:text=leave%2016px%20of%20padding%20on%20the%20edge%20of%20the%20viewport). ## Detailed Description of the Pull Request / Additional comments You can repro the overlap in the default configuration by grabbing the scrollbar with the mouse pointer. But there's an accessibility option that makes this more obvious: Settings > Display > Automatically hide scroll bars. With that option enabled, the text is _always_ overlapping. The gutter does look slightly larger than it needs to be when the scrollbar is thin or completely hidden. Dynamic reflow may help, but unfortunately, I don't know enough XAML to wire that up. MUX has a promising visual state named `ScrollBarsSeparatorExpanded`, so the scientists suggest we _could_, while the designers are still pondering whether we _should_. ## Validation Steps Performed Old appearance: ![image](https://user-images.githubusercontent.com/10259764/87817879-94d85100-c81e-11ea-956c-ca0e23576fef.png) New appearance with fat scrollbars: ![image](https://user-images.githubusercontent.com/10259764/87817914-a4579a00-c81e-11ea-9e9d-195969e6da95.png) New appearance with thin scrollbars: ![image](https://user-images.githubusercontent.com/10259764/87818061-dff26400-c81e-11ea-866e-088f72276343.png) New appearance with no scrollbar: ![image](https://user-images.githubusercontent.com/10259764/87819674-7758b680-c821-11ea-98b7-dddd1573c242.png)
claunia added the pull-request label 2026-01-31 09:18:22 +00:00
Sign in to join this conversation.
No Label pull-request
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#26828