update the viewportElement style width upon refreshing of the viewport to accomodate changes in scrollBarWidth

Author: Puneethnaik

demo/client.ts

@@ -348,6 +348,9 @@ function initOptions(term: TerminalType): void {
       } else if (o === 'lineHeight' || o === 'scrollSensitivity') {
         term.setOption(o, parseFloat(input.value));
         updateTerminalSize();
+      } else if(o === 'scrollback') {
+        term.setOption(o, parseInt(input.value));
+        setTimeout(() => updateTerminalSize(), 5);
       } else {
         term.setOption(o, parseInt(input.value));
       }

src/browser/Viewport.ts

@@ -93,7 +93,12 @@ export class Viewport extends Disposable implements IViewport {
       this._ignoreNextScrollEvent = true;
       this._viewportElement.scrollTop = scrollTop;
     }
-
+    if (this._optionsService.getOption('scrollback') === 0) {
+      this.scrollBarWidth = 0;
+    } else {
+      this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
+    }
+    this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth).toString() + 'px';
     this._refreshAnimationFrame = null;
   }
   /**
@@ -131,6 +136,9 @@ export class Viewport extends Disposable implements IViewport {
       this._refresh(immediate);
       return;
     }
+    // This is for refreshing the viewport if scrollBarWidth has to be updated
+    this._refresh(immediate);
+    return;
   }
 
   /**