From df4f9edb5eab16b33171f34d93817456b7579ed5 Mon Sep 17 00:00:00 2001 From: yogeshwaran-c Date: Sun, 12 Apr 2026 10:48:49 +0530 Subject: [PATCH] Fix editor sticky scroll shadow missing (#300355) The editor sticky scroll's bottom shadow was not rendering reliably. The previous approach used a box-shadow directly on the widget's root element which also had overflow:hidden, causing the outward shadow to be clipped. This adopts the same proven pattern used by the tree view's sticky scroll: a dedicated shadow element positioned just below the content area, using an inset box-shadow that is never clipped by the parent's overflow. The widget's DOM is restructured with a content wrapper (sticky-widget-content) that carries the overflow:hidden and border, while the outer root (sticky-widget) allows the shadow element to extend beyond the content bounds. --- .../stickyScroll/browser/stickyScroll.css | 17 ++++++++++++++--- .../stickyScroll/browser/stickyScrollWidget.ts | 13 +++++++++++-- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.css b/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.css index ecc59245decf8..1d4e8c6f74d76 100644 --- a/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.css +++ b/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.css @@ -4,15 +4,26 @@ *--------------------------------------------------------------------------------------------*/ .monaco-editor .sticky-widget { - overflow: hidden; - border-bottom: 1px solid var(--vscode-editorStickyScroll-border); width: 100%; - box-shadow: var(--vscode-editorStickyScroll-shadow) 0 4px 2px -2px; z-index: 4; right: initial !important; margin-left: '0px'; } +.monaco-editor .sticky-widget .sticky-widget-content { + overflow: hidden; + border-bottom: 1px solid var(--vscode-editorStickyScroll-border); +} + +.monaco-editor .sticky-widget .sticky-widget-shadow { + position: absolute; + bottom: -3px; + left: 0; + height: 3px; + width: 100%; + box-shadow: var(--vscode-editorStickyScroll-shadow) 0 6px 6px -6px inset; +} + .monaco-editor .sticky-widget .sticky-widget-line-numbers { float: left; background-color: var(--vscode-editorStickyScrollGutter-background); diff --git a/src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts b/src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts index 2a7c1cf5b1b38..c14be20b231e4 100644 --- a/src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts +++ b/src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts @@ -53,9 +53,11 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget { private readonly _foldingIconStore = this._register(new DisposableStore()); private readonly _rootDomNode: HTMLElement = document.createElement('div'); + private readonly _contentDomNode: HTMLElement = document.createElement('div'); private readonly _lineNumbersDomNode: HTMLElement = document.createElement('div'); private readonly _linesDomNodeScrollable: HTMLElement = document.createElement('div'); private readonly _linesDomNode: HTMLElement = document.createElement('div'); + private readonly _shadowDomNode: HTMLElement = document.createElement('div'); private readonly _editor: ICodeEditor; @@ -87,10 +89,16 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget { this._linesDomNodeScrollable.className = 'sticky-widget-lines-scrollable'; this._linesDomNodeScrollable.appendChild(this._linesDomNode); + this._contentDomNode.className = 'sticky-widget-content'; + this._contentDomNode.appendChild(this._lineNumbersDomNode); + this._contentDomNode.appendChild(this._linesDomNodeScrollable); + + this._shadowDomNode.className = 'sticky-widget-shadow'; + this._rootDomNode.className = 'sticky-widget'; this._rootDomNode.classList.toggle('peek', editor instanceof EmbeddedCodeEditorWidget); - this._rootDomNode.appendChild(this._lineNumbersDomNode); - this._rootDomNode.appendChild(this._linesDomNodeScrollable); + this._rootDomNode.appendChild(this._contentDomNode); + this._rootDomNode.appendChild(this._shadowDomNode); this._setHeight(0); const updateScrollLeftPosition = () => { @@ -266,6 +274,7 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget { this._rootDomNode.style.display = 'block'; this._lineNumbersDomNode.style.height = `${this._height}px`; this._linesDomNodeScrollable.style.height = `${this._height}px`; + this._contentDomNode.style.height = `${this._height}px`; this._rootDomNode.style.height = `${this._height}px`; }