From 9b1eec8adea79bf48717c0dc3478707187ab0018 Mon Sep 17 00:00:00 2001 From: metonym Date: Fri, 22 Oct 2021 09:49:01 -0700 Subject: [PATCH 1/3] fix(viewport): account for fallback scrollbar width --- src/browser/Viewport.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/Viewport.ts b/src/browser/Viewport.ts index 3c9bea4c..afed55fa 100644 --- a/src/browser/Viewport.ts +++ b/src/browser/Viewport.ts @@ -116,7 +116,7 @@ export class Viewport extends Disposable implements IViewport { } this._lastHadScrollBar = this.scrollBarWidth > 0; - this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth).toString() + 'px'; + this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth + (this._lastHadScrollBar ? FALLBACK_SCROLL_BAR_WIDTH : 0)).toString() + 'px'; this._refreshAnimationFrame = null; } From 7deb01267b384892b8d618f2527b51c5db6fc636 Mon Sep 17 00:00:00 2001 From: metonym Date: Fri, 22 Oct 2021 11:02:59 -0700 Subject: [PATCH 2/3] Use computed padding of terminal element to compute viewport width --- src/browser/Terminal.ts | 3 ++- src/browser/Viewport.ts | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts index 2cd9bf99..0047ce9f 100644 --- a/src/browser/Terminal.ts +++ b/src/browser/Terminal.ts @@ -494,7 +494,8 @@ export class Terminal extends CoreTerminal implements ITerminal { this.viewport = this._instantiationService.createInstance(Viewport, (amount: number) => this.scrollLines(amount, true, ScrollSource.VIEWPORT), this._viewportElement, - this._viewportScrollArea + this._viewportScrollArea, + this.element ); this.viewport.onThemeChange(this._colorManager.colors); this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea())); diff --git a/src/browser/Viewport.ts b/src/browser/Viewport.ts index afed55fa..f2cc6376 100644 --- a/src/browser/Viewport.ts +++ b/src/browser/Viewport.ts @@ -42,6 +42,7 @@ export class Viewport extends Disposable implements IViewport { private readonly _scrollLines: (amount: number) => void, private readonly _viewportElement: HTMLElement, private readonly _scrollArea: HTMLElement, + private readonly _element: HTMLElement, @IBufferService private readonly _bufferService: IBufferService, @IOptionsService private readonly _optionsService: IOptionsService, @ICharSizeService private readonly _charSizeService: ICharSizeService, @@ -115,8 +116,10 @@ export class Viewport extends Disposable implements IViewport { this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH; } this._lastHadScrollBar = this.scrollBarWidth > 0; - - this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth + (this._lastHadScrollBar ? FALLBACK_SCROLL_BAR_WIDTH : 0)).toString() + 'px'; + + const elementStyle = window.getComputedStyle(this._element); + const elementPadding = parseInt(elementStyle.paddingLeft) + parseInt(elementStyle.paddingRight); + this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth + (this._lastHadScrollBar ? elementPadding : 0)).toString() + 'px'; this._refreshAnimationFrame = null; } From ed1aecb251797368593cce3c3cf7141512a2adb5 Mon Sep 17 00:00:00 2001 From: metonym Date: Fri, 22 Oct 2021 11:28:30 -0700 Subject: [PATCH 3/3] chore(viewport): run yarn lint --fix --- src/browser/Viewport.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/Viewport.ts b/src/browser/Viewport.ts index f2cc6376..f73594bf 100644 --- a/src/browser/Viewport.ts +++ b/src/browser/Viewport.ts @@ -116,7 +116,7 @@ export class Viewport extends Disposable implements IViewport { this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH; } this._lastHadScrollBar = this.scrollBarWidth > 0; - + const elementStyle = window.getComputedStyle(this._element); const elementPadding = parseInt(elementStyle.paddingLeft) + parseInt(elementStyle.paddingRight); this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth + (this._lastHadScrollBar ? elementPadding : 0)).toString() + 'px';