Address comments

- Show scroll bar
- Style scroll bar similar to VS Code's
- Prevent text from being hidden past the bottom of the screen after resizing
- Debounce resizing to prevent flashing

Signed-off-by: David Thompson <davthomp@redhat.com>

Author: datho7561

src/webview/common/scrollbar.scss

@@ -0,0 +1,4 @@
+
+::-webkit-scrollbar {
+    width: var(--vscode-text-width)
+}

src/webview/openshift-terminal/app/terminalInstance.tsx

@@ -11,6 +11,7 @@ import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from 'xterm-addon-web-links';
 import { WebglAddon } from 'xterm-addon-webgl';
 import 'xterm/css/xterm.css';
+import '../../common/scrollbar.scss';
 
 /**
  * Represents a tab in the terminal view. Wraps an instance of xtermjs.
@@ -37,6 +38,8 @@ export const TerminalInstance = (props: {
         return newTerm;
     });
 
+    let resizeTimeout: NodeJS.Timeout = undefined;
+
     const setXtermjsTheme = (fontFamily: string, fontSize: number) => {
         const computedStyle = window.getComputedStyle(document.body);
         const xtermjsTheme: ITheme = {
@@ -162,7 +165,7 @@ export const TerminalInstance = (props: {
         };
     }, []);
 
-    const handleResize = function (_e: UIEvent) {
+    const performResize = function () {
         const dims = fitAddon.proposeDimensions();
         window.vscodeApi.postMessage({
             kind: 'resize',
@@ -172,6 +175,13 @@ export const TerminalInstance = (props: {
             },
         });
         fitAddon.fit();
+    }
+
+    const handleResize = function (_e: UIEvent) {
+        if (resizeTimeout) {
+            clearTimeout(resizeTimeout);
+        }
+        resizeTimeout = setTimeout(performResize, 200);
     };
 
     // resize the terminal when the window is resized
@@ -183,10 +193,10 @@ export const TerminalInstance = (props: {
     }, [fitAddon]);
 
     return (
-        <Box marginY="8px" marginX="16px" width="100%" height="100%">
+        <Box marginY="8px" marginX="16px" width="100%" height="100%" overflow='scroll'>
             <div
                 {...{ name: 'terminal-instance' }}
-                style={{ width: '100%', height: '100%', display: 'flex', flexFlow: 'column' }}
+                style={{ width: '100%', height: '100%', display: 'flex', flexFlow: 'column', overflow: 'hidden' }}
                 ref={termRef}
             ></div>
         </Box>

src/webview/openshift-terminal/app/terminalMultiplexer.tsx

@@ -258,7 +258,7 @@ export const TerminalMultiplexer = () => {
                     </Box>
                     {terminals.map((terminal, i) => (
                         <TabPanel
-                            sx={{ margin: '0px', padding: '0px', flex: '1' }}
+                            sx={{ margin: '0px', padding: '0px', flex: '1',  height: 'calc(100% - 36px)'}}
                             value={`${i}`}
                             key={terminal.terminal.props.uuid}
                         >