Fine tune tree find widget layout (microsoft#156579)

joaomoreno · web-flow · commit fad1b7c7c2ca · 2022-07-28T16:33:50.000+02:00
fixes microsoft#156247
diff --git a/src/vs/base/browser/ui/tree/abstractTree.ts b/src/vs/base/browser/ui/tree/abstractTree.ts
@@ -799,7 +799,7 @@ class FindWidget<T, TFilterData> extends Disposable {
 
 	layout(width: number = this.width): void {
 		this.width = width;
-		this.right = Math.min(Math.max(20, this.right), Math.max(20, width - 170));
+		this.right = clamp(this.right, 0, Math.max(0, width - 212));
 		this.elements.root.style.right = `${this.right}px`;
 	}
 
diff --git a/src/vs/base/browser/ui/tree/media/tree.css b/src/vs/base/browser/ui/tree/media/tree.css
@@ -74,8 +74,9 @@
 	display: flex;
 	padding: 3px;
 	transition: top 0.3s;
-	width: 160px;
+	max-width: 200px;
 	z-index: 100;
+	margin: 0 6px;
 }
 
 .monaco-tree-type-filter.disabled {

Original file line number	Diff line number	Diff line change
`@@ -799,7 +799,7 @@ class FindWidget<T, TFilterData> extends Disposable {`
`799`	`799`
`800`	`800`	`layout(width: number = this.width): void {`
`801`	`801`	`this.width = width;`
`802`		`- this.right = Math.min(Math.max(20, this.right), Math.max(20, width - 170));`
	`802`	`+ this.right = clamp(this.right, 0, Math.max(0, width - 212));`
`803`	`803`	this.elements.root.style.right = `${this.right}px`;
`804`	`804`	`}`
`805`	`805`