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
microsoft · Sep 21, 2021 · 95d2267 · 95d2267
1 parent 6c5b3df
commit 95d2267
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 33 deletions.
diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css
@@ -41,19 +41,16 @@
 .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,
 .monaco-workbench .pane-body.integrated-terminal .terminal-wrapper.active {
 	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
@@ -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;
 	}