From 66a2c4ba808a75f0093958f833d43a6725ae601b Mon Sep 17 00:00:00 2001
From: Til <til.schmitter@gmail.com>
Date: Sat, 9 May 2026 20:12:36 +0200
Subject: [PATCH] show less ui reflows during load

---
 copyparty/web/browser.css  | 27 ++++++++++++++++++++++-----
 copyparty/web/browser.html |  6 +++---
 copyparty/web/browser.js   |  4 ++--
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 602fea3a..8feb5596 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -3797,10 +3797,6 @@ html.d #treepar {
 		top: .6em;
 		right: .6em;
 	}
-	#ops a {
-		padding-left: .15em;
-		padding-right: .15em;
-	}
 	#srchfolder_div {
 		left: 2.8em;
 	}
@@ -3854,6 +3850,14 @@ html.e #wrap.thin {
 	}
 }
 @media (max-width: 50em){
+	#path {
+		position: relative;
+		height: 2.2em;
+		margin: .5em 0 0 0;
+		z-index: -1;
+	}
+	html.dy .ghead,
+	html.b .ghead,
 	html.dy #wrap.thin .ghead,
 	html.b #wrap.thin .ghead {
 		top: 7.2em;
@@ -3889,7 +3893,9 @@ html.e #wrap.thin {
 		margin-left: -1em;
 		margin-right: -1em;
 	}
+	#actionsArea,
 	#pathBar.thin #actionsArea {
+		position: absolute;
 		top: 1em;
 		right: 1em;
 	}
@@ -3952,6 +3958,8 @@ html.e #wrap.thin {
 		padding: .5em;
 		padding-right: 2em;
 	}
+	#wfp,
+	#wfp.shifted,
 	#pathBar.thin #wfp,
 	#pathBar.thin #wfp.shifted {
 		margin-left: 2em;
@@ -3959,10 +3967,13 @@ html.e #wrap.thin {
 	#wrap.thin .ghead {
 		top: 7em;
 	}
+	html.cy .ghead,
+	html.a .ghead,
 	html.cy #wrap.thin .ghead,
 	html.a #wrap.thin .ghead {
 		top: 7.3em;
 	}
+	html.cz .ghead,
 	html.cz #wrap.thin .ghead {
 		top: 7.7em;
 	}
@@ -3973,7 +3984,13 @@ html.e #wrap.thin {
 	}
 }
 
-@media (max-width: 32em) {
+@media (max-width: 40em) {
+	#ops a {
+		padding-left: .15em;
+		padding-right: .15em;
+	}
+}
+@media (max-width: 33em) {
 	#wfp #gon,
 	#wfp #gop {
 		display: none;
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index f71a308e..1e648723 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -55,9 +55,9 @@
 
 		<div id="pathBar">
 			<h2 id="wfp" class="shifted">
-				<a href="#" id="gop" class="btn">⬅️</a>
-				<a href="#" id="gon" class="btn">➡️</a>
-				<a href="#" id="gou" class="btn">⬆️</a>
+				<a href="#" id="gop" class="btn"></a>
+				<a href="#" id="gon" class="btn"></a>
+				<a href="#" id="gou" class="btn"></a>
 			</h2>
 			<h1 id="path">
 				{%- for n in vpnodes %}
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index e5827f83..af853769 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -7719,7 +7719,7 @@ function onwidgetresize(){
 	ebi('path').onresize = keep_right(ebi('path'));
 }
 window.addEventListener('resize', onwidgetresize);
-setTimeout(onwidgetresize, 1);
+onwidgetresize();
 
 var treectl = (function () {
 	var r = {
@@ -7984,7 +7984,7 @@ var treectl = (function () {
 		ebi('tree_footer').style.display = 'block';
 		ebi('wrap').style.marginLeft = w;
 		ebi('widget').style.marginLeft = (iw /1.4) + 'em';
-		setTimeout(onwidgetresize, 1);
+		onwidgetresize();
 		setTimeout(onscroll, 1);
 	}