From 970badce664b58cc28d9f764bb0380fd5ad672f6 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Sat, 6 Nov 2021 00:06:14 +0100
Subject: [PATCH] positioning + optimization

---
 copyparty/web/browser.css |  8 ++++----
 copyparty/web/browser.js  | 22 +++++++++++++++++++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 68d8b19f..22e598e1 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -673,13 +673,13 @@ input.eq_gain {
 	border-bottom: 1px solid #111;
 	overflow: hidden;
 }
-#tree #treepar {
+#treepar {
 	z-index: 1;
 	position: fixed;
-	margin-top: -3px;
-	margin-left: -2em;
-	width: calc(var(--nav-sz) + 0.5em);
+	left: -.75em;
+	width: calc(var(--nav-sz) - 0.5em);
 	border-bottom: 1px solid #444;
+	overflow: hidden;
 }
 #tree, #treeh {
 	border-radius: 0 .3em 0 0;
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 23bde49b..a08515e1 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -3397,11 +3397,20 @@ var treectl = (function () {
 
 		var tree = ebi('tree'),
 			wrap = ebi('wrap'),
+			wraptop = null,
 			atop = wrap.getBoundingClientRect().top,
 			winh = window.innerHeight,
 			parp = ebi('treepar'),
-			y = tree.scrollTop;
+			y = tree.scrollTop,
+			w = tree.offsetWidth;
 
+		if (atop !== prev_atop || winh !== prev_winh)
+			wraptop = Math.floor(wrap.offsetTop);
+
+		if (r.parpane && r.pdir.length && w != r.pdirw) {
+			r.pdirw = w;
+			compy();
+		}
 
 		if (!r.parpane || !r.pdir.length || y > r.pdir.slice(-1)[0][0] || y < r.pdir[0][0]) {
 			parp.style.display = 'none';
@@ -3427,9 +3436,16 @@ var treectl = (function () {
 				for (var a = 0, aa = els.length; a < aa; a++)
 					els[a].onclick = bad_proxy;
 			}
+			y = ebi('treeh').offsetHeight;
+			if (!fixedpos)
+				y += tree.offsetTop - document.documentElement.scrollTop;
+
+			y = (y - 3) + 'px';
+			if (parp.style.top != y)
+				parp.style.top = y;
 		}
 
-		if (atop === prev_atop && winh === prev_winh)
+		if (wraptop === null)
 			return;
 
 		prev_atop = atop;
@@ -3450,7 +3466,7 @@ var treectl = (function () {
 			tree.style.top = Math.max(0, parseInt(atop)) + 'px';
 		}
 		else {
-			var top = Math.max(0, parseInt(wrap.offsetTop)),
+			var top = Math.max(0, wraptop),
 				treeh = winh - atop;
 
 			tree.style.top = top + 'px';