8000 Reserve space for scrollbar when positioning hover widgets at right edge by Copilot · Pull Request #252340 · microsoft/vscode · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Reserve space for scrollbar when positioning hover widgets at right edge #252340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Reserve space for scrollbar when positioning hover widgets at right edge #252340

wants to merge 2 commits into from
+10 −1

Conversation

Copilot
Copy link
Contributor
@Copilot Copilot AI commented Jun 24, 2025 •
edited
Loading

When hover widgets are positioned at the right edge of the editor, they can cover the vertical scrollbar, making it impossible for users to grab and interact with it. This is particularly problematic in split editor views or when working with long files that require scrolling.

Changes Made

  • Added scrollbar detection logic in computeXCordinate() method that checks if content overflows vertically (scrollHeight > clientHeight)
  • Reserved 18px additional space when a scrollbar is detected, ensuring it remains accessible
  • Added ScrollbarReservedSpace constant for consistent scrollbar width handling across the codebase

Implementation Details

The fix modifies the hover positioning logic in src/vs/editor/browser/services/hoverService/hoverWidget.ts:

// Calculate right margin, reserving space for scrollbar if present
let rightMargin = Constants.HoverWindowEdgeMargin;
if (this._targetDocumentElement.scrollHeight > this._targetDocumentElement.clientHeight) {
    // Reserve space for the vertical scrollbar to ensure it remains accessible
    rightMargin += Constants.ScrollbarReservedSpace;
}

Before/After Behavior

  • Before: Hover positioned 2px from right edge (could cover scrollbar)
  • After: Hover positioned 20px from right edge when scrollbar present (2px base + 18px scrollbar space)
  • No scrollbar: Behavior unchanged (still 2px from edge)

Testing

  • ✅ Normal hovers without scrollbars maintain existing behavior
  • ✅ Hovers with scrollbars properly reserve space for scrollbar access
  • ✅ Edge cases (narrow windows, wide hovers) handled gracefully
  • ✅ Compatible with existing right-aligned CSS styling

The 18px reserved space accommodates typical scrollbar widths across different operating systems and browsers (Windows: ~17-20px, macOS: ~15-17px, Linux: ~15-20px).

Fixes #123448.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

  • electronjs.org
    • Triggering command: node-gyp (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@Copilot @aiday-mar
Reserve space for scrollbar in hover positioning
9ef1e36 
Co-authored-by: aiday-mar <61460952+aiday-mar@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Reserve some space to the right of the hover to be able to grab the scrollbar Reserve space for scrollbar when positioning hover widgets at right edge Jun 24, 2025
@Copilot Copilot AI requested a review from aiday-mar June 24, 2025 21:21
Copilot finished work on behalf of aiday-mar June 24, 2025 21:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aiday-mar aiday-mar Awaiting requested review from aiday-mar

At least 1 approving review is required to merge this pull request.

Assignees

@aiday-mar aiday-mar

Copilot code review Copilot

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Reserve some space to the right of the hover to be able to grab the scrollbar
2 participants
@Copilot @aiday-mar
0