fix terminal width calculation

[ZoeyR]

Fixes #1284

The problem breaks down as follows:

• The regression was introduced in Support setting padding on the .xterm element #1208 to support padding in the .xterm css class
• Padding .xterm is calculated from the right hand side of the scrollbar
• The PR attempted to make the effective area of the terminal match the padding exactly
• The addition of scrollBarWidth in the code segment below causes the effective interactive area of the terminal to be (column_width * num_columns) + scrollbar_width

Renderer.ts

this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth + this._terminal.viewport.scrollBarWidth}px`;

• This means that there is an area past where the terminal will actually have text that has all the interactions of a terminal, when the padding is less than the width of the scroll bar this will cause interactivity issues with the scroll bar element.

I believe the correct fix is to remove the addition of scrollBarWidth when setting the screenElement width. This does mean that padding on the right side of the terminal will appear to be too large but the terminal already had the implicit padding of avoiding the scroll bar anyways.

Edit: After looking at the results more closely this will have the same visual layout as before, it just makes the clickable area match the actual terminal area.

A workaround for anyone affected by this would be to set the right padding of .xterm to be equal to the width of the scroll bar.

[Tyriar]

This broke the scrollbar in VS Code as well when I reduced the horizontal margin between the xterm element and the scrollbar. The fix works 👍