diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css index b0f82cd7de9ca..cc13450fe6fd8 100644 --- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css +++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css @@ -48,13 +48,18 @@ .monaco-workbench .pane-body.integrated-terminal .xterm { /* All terminals have at least 10px left/right edge padding and 2 padding on the bottom (so underscores on last line are visible */ padding: 0 10px 2px; - /* Bottom align the terminal withing the split pane */ + /* Bottom align the terminal within the split pane */ position: absolute; bottom: 0; left: 0; right: 0; } +.terminal-side-view .terminal.xterm { + /* Top align the terminal within the split pane when the panel is vertical */ + top: 0; +} + .monaco-workbench .editor-instance .terminal-wrapper.fixed-dims .xterm, .monaco-workbench .pane-body.integrated-terminal .terminal-wrapper.fixed-dims .xterm { position: static; diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts index 6c9576dbc2317..c0ba0a11000e6 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts @@ -28,9 +28,15 @@ import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/termin const $ = dom.$; -const FIND_FOCUS_CLASS = 'find-focused'; -const STATUS_ICON_WIDTH = 30; -const SPLIT_ANNOTATION_WIDTH = 30; +const enum CssClass { + ViewIsVertical = 'terminal-side-view', + FindFocus = 'find-focused' +} + +const enum WidthConstants { + StatusIcon = 30, + SplitAnnotation = 30 +} export class TerminalTabbedView extends Disposable { @@ -129,13 +135,18 @@ export class TerminalTabbedView extends Disposable { this._register(this._themeService.onDidColorThemeChange(theme => this._updateTheme(theme))); this._updateTheme(); - this._findWidget.focusTracker.onDidFocus(() => this._terminalContainer.classList.add(FIND_FOCUS_CLASS)); - this._findWidget.focusTracker.onDidBlur(() => this._terminalContainer.classList.remove(FIND_FOCUS_CLASS)); + this._findWidget.focusTracker.onDidFocus(() => this._terminalContainer.classList.add(CssClass.FindFocus)); + this._findWidget.focusTracker.onDidBlur(() => this._terminalContainer.classList.remove(CssClass.FindFocus)); this._attachEventListeners(parentElement, this._terminalContainer); this._terminalGroupService.onDidChangePanelOrientation((orientation) => { this._panelOrientation = orientation; + if (this._panelOrientation === Orientation.VERTICAL) { + this._terminalContainer.classList.add(CssClass.ViewIsVertical); + } else { + this._terminalContainer.classList.remove(CssClass.ViewIsVertical); + } }); this._splitView = new SplitView(parentElement, { orientation: Orientation.HORIZONTAL, proportionalLayout: false }); @@ -223,8 +234,8 @@ export class TerminalTabbedView extends Disposable { private _getAdditionalWidth(instance: ITerminalInstance): number { // Size to include padding, icon, status icon (if any), split annotation (if any), + a little more const additionalWidth = 40; - const statusIconWidth = instance.statusList.statuses.length > 0 ? STATUS_ICON_WIDTH : 0; - const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? SPLIT_ANNOTATION_WIDTH : 0; + const statusIconWidth = instance.statusList.statuses.length > 0 ? WidthConstants.StatusIcon : 0; + const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? WidthConstants.SplitAnnotation : 0; return additionalWidth + splitAnnotationWidth + statusIconWidth; }