From 95d2267f27d59e76ca5cd232b3562c2ad4bbbe55 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Tue, 21 Sep 2021 12:46:04 -0700
Subject: [PATCH] Use flexbox to layout terminals

This makes the terminal element ancestors have the correct dimensions which should
make it easier to use the scrollable element object

Part of #74501
---
 .../terminal/browser/media/terminal.css       | 33 ++++++-------------
 .../terminal/browser/terminalInstance.ts      | 12 ++-----
 2 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css
index c6b0a762212e8..381df2a2e4cd4 100644
--- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css
+++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css
@@ -41,7 +41,9 @@
 .monaco-workbench .pane-body.integrated-terminal .terminal-wrapper {
 	display: none;
 	margin: 0 10px;
-	bottom: 2px;
+	height: 100%;
+	padding-bottom: 2px;
+	box-sizing: border-box;
 }
 
 .monaco-workbench .editor-instance .terminal-wrapper.active,
@@ -49,11 +51,6 @@
 	display: block;
 }
 
-.monaco-workbench .pane-body.integrated-terminal .terminal-wrapper.active {
-	position: absolute;
-	top: 0;
-}
-
 .monaco-workbench .editor-instance .terminal-group .monaco-split-view2.horizontal .split-view-view:first-child .terminal-wrapper,
 .monaco-workbench .pane-body.integrated-terminal .terminal-group .monaco-split-view2.horizontal .split-view-view:first-child .terminal-wrapper {
 	margin-left: 20px;
@@ -69,31 +66,24 @@
 	position: relative;
 }
 
-.monaco-workbench .editor-instance  .terminal-wrapper > div,
+.monaco-workbench .editor-instance .terminal-wrapper > div,
 .monaco-workbench .pane-body.integrated-terminal .terminal-wrapper > div {
 	height: 100%;
+	/* Align the viewport and canvases to the bottom of the panel */
+	display: flex;
+	align-items: flex-end;
 }
 
-.monaco-workbench .editor-instance  .xterm-viewport,
+.monaco-workbench .editor-instance .xterm-viewport,
 .monaco-workbench .pane-body.integrated-terminal .xterm-viewport {
 	box-sizing: border-box;
 	margin-right: -10px;
 }
-.monaco-workbench .editor-instance  .terminal-group .monaco-split-view2.horizontal .split-view-view:last-child .xterm-viewport,
+.monaco-workbench .editor-instance .terminal-group .monaco-split-view2.horizontal .split-view-view:last-child .xterm-viewport,
 .monaco-workbench .pane-body.integrated-terminal .terminal-group .monaco-split-view2.horizontal .split-view-view:last-child .xterm-viewport {
 	margin-right: -20px;
 }
 
-.monaco-workbench .pane-body.integrated-terminal canvas {
-	/* Align the viewport and canvases to the bottom of the panel */
-	position: absolute;
-	right: -20px;
-	bottom: 0;
-	left: 0;
-	/* Disable upstream's style */
-	top: auto;
-}
-
 .monaco-workbench .pane-body.integrated-terminal {
 	font-variant-ligatures: none;
 }
@@ -137,9 +127,6 @@
 }
 
 .monaco-workbench .pane-body.integrated-terminal .xterm {
-	position: absolute;
-	bottom: 0;
-	left: 0;
 	user-select: none;
 	-webkit-user-select: none;
 }
@@ -203,7 +190,7 @@
 	border-style: solid;
 }
 
-.monaco-workbench .part.sidebar > .title > .title-actions .switch-terminal  {
+.monaco-workbench .part.sidebar > .title > .title-actions .switch-terminal {
 	display: flex;
 	align-items: center;
 	font-size: 11px;
diff --git a/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts b/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts
index 3a37b5745cdad..8ec723670303d 100644
--- a/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts
+++ b/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts
@@ -485,7 +485,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 			return;
 		}
 
-		const computedStyle = window.getComputedStyle(this._container.parentElement!);
+		const computedStyle = window.getComputedStyle(this._wrapperElement!);
 		const width = parseInt(computedStyle.getPropertyValue('width').replace('px', ''), 10);
 		const height = parseInt(computedStyle.getPropertyValue('height').replace('px', ''), 10);
 		this._evaluateColsAndRows(width, height);
@@ -562,15 +562,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 			return undefined;
 		}
 
-		const wrapperElementStyle = getComputedStyle(this._wrapperElement);
-		const marginLeft = parseInt(wrapperElementStyle.marginLeft!.split('px')[0], 10);
-		const marginRight = parseInt(wrapperElementStyle.marginRight!.split('px')[0], 10);
-		const bottom = parseInt(wrapperElementStyle.bottom!.split('px')[0], 10);
-
-		const innerWidth = width - marginLeft - marginRight;
-		const innerHeight = height - bottom - 1;
-
-		TerminalInstance._lastKnownCanvasDimensions = new dom.Dimension(innerWidth, innerHeight);
+		TerminalInstance._lastKnownCanvasDimensions = new dom.Dimension(width, height - 2 /* bottom padding */);
 		return TerminalInstance._lastKnownCanvasDimensions;
 	}