From dee572067606d89683c87dbd2394a750265ec1c7 Mon Sep 17 00:00:00 2001
From: Kim Santiago <31145923+kisantia@users.noreply.github.com>
Date: Wed, 24 Mar 2021 13:41:02 -0700
Subject: [PATCH] make task history horizontally scrollable (#14846)

---
 .../contrib/tasks/browser/media/tasksPanel.css      | 13 +++++++++----
 .../workbench/contrib/tasks/browser/tasksView.ts    |  2 ++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css b/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css
index edc3046000..260f92862a 100644
--- a/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css
+++ b/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css
@@ -7,22 +7,27 @@
 	padding: 10px 22px 0 22px;
 }
 
+.task-history .monaco-tree > .monaco-scrollable-element > .monaco-tree-wrapper {
+	overflow-x: auto !important;
+}
+
+.task-history .monaco-tree .monaco-tree-rows > .monaco-tree-row {
+	width: fit-content;
+}
+
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group {
 	line-height: 22px;
 	display: flex;
+	width: fit-content;
 }
 
 /* task label and description */
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .label {
-	text-overflow: ellipsis;
-	overflow: hidden;
 	font-weight: bold;
 }
 
 /* style for server name | database name */
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .description {
-	text-overflow: ellipsis;
-	overflow: hidden;
 	padding-left: 12px
 }
 
diff --git a/src/sql/workbench/contrib/tasks/browser/tasksView.ts b/src/sql/workbench/contrib/tasks/browser/tasksView.ts
index 7a74d2e845..a478bd6d06 100644
--- a/src/sql/workbench/contrib/tasks/browser/tasksView.ts
+++ b/src/sql/workbench/contrib/tasks/browser/tasksView.ts
@@ -103,6 +103,8 @@ export class TaskHistoryView extends ViewPane {
 		const filter = new DefaultFilter();
 		const accessibilityProvider = new DefaultAccessibilityProvider();
 
+		treeContainer.classList.add('task-history');
+
 		return new Tree(treeContainer, {
 			dataSource, renderer, controller, dnd, filter, accessibilityProvider
 		}, {