Merge pull request #3525 from metonym/fix-viewport-scrollbar

Include xterm padding when computing viewport width

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()));

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,
@@ -116,7 +117,9 @@ 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';
+    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;
   }