From 1f6636b732ed629b7db6d9c444cc9d14e7407bf0 Mon Sep 17 00:00:00 2001
From: Daniel Imms <tyriar@tyriar.com>
Date: Wed, 29 Apr 2020 07:03:46 -0700
Subject: [PATCH] Right align status bar when anchor is closer to right edge

Part of #96497
---
 .../workbench/contrib/terminal/browser/media/widgets.css | 9 +++++++++
 .../contrib/terminal/browser/widgets/hoverWidget.ts      | 8 +++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/vs/workbench/contrib/terminal/browser/media/widgets.css b/src/vs/workbench/contrib/terminal/browser/media/widgets.css
index b9f8aa7fa35..ca64da196e6 100644
--- a/src/vs/workbench/contrib/terminal/browser/media/widgets.css
+++ b/src/vs/workbench/contrib/terminal/browser/media/widgets.css
@@ -26,6 +26,15 @@
 	color: #3794ff;
 }
 
+.monaco-workbench .terminal-hover-widget.right-aligned .hover-row.status-bar .actions {
+	flex-direction: row-reverse;
+}
+
+.monaco-workbench .terminal-hover-widget.right-aligned .hover-row.status-bar .actions .action-container {
+	margin-right: 0;
+	margin-left: 16px;
+}
+
 .monaco-workbench .terminal-overlay-widget {
 	position: absolute;
 	left: 0;
diff --git a/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts b/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts
index a2cbff25d56..6802640ec69 100644
--- a/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts
+++ b/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts
@@ -106,13 +106,19 @@ export class HoverWidget extends Widget {
 	public layout(): void {
 		const anchor = this._target.anchor;
 
+		this._domNode.classList.remove('right-aligned');
 		if (anchor.horizontalAnchorSide === HorizontalAnchorSide.Left) {
 			if (anchor.x + this._domNode.clientWidth * 0.75 > document.documentElement.clientWidth) {
 				// Shift the hover to the left when > 25% would be cut off
 				const width = Math.round(this._domNode.clientWidth * 0.75);
 				this._domNode.style.width = `${width - 1}px`;
 				this._domNode.style.maxWidth = '';
-				this._domNode.style.left = `${document.documentElement.clientWidth - width - 1}px`;
+				const left = document.documentElement.clientWidth - width - 1;
+				this._domNode.style.left = `${left}px`;
+				// Right align if the right edge is closer to the anchor than the left edge
+				if (left + width / 2 < anchor.x) {
+					this._domNode.classList.add('right-aligned');
+				}
 			} else {
 				this._domNode.style.width = '';
 				this._domNode.style.maxWidth = `${document.documentElement.clientWidth - anchor.x - 1}px`;
-- 
GitLab