From 09a9ead9da59664d61537ecd86e6b8e7207d8d27 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Sat, 4 Apr 2026 13:11:29 +0200
Subject: [PATCH] use better structure for tree footer

---
 copyparty/web/browser.css  | 11 ++++++-----
 copyparty/web/browser.html | 17 ++++++++++-------
 copyparty/web/browser.js   |  4 ++--
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 89fdb675..2d30b2f9 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -4333,14 +4333,15 @@ html.e #detree {
 	border-radius: .3em;
 	background: var(--btn-h-bg);
 }
-
+#tree_footer {
+	position: absolute;
+	bottom: 1em;
+	left: 1em;
+	transition: width .15s;
+}
 .popup_button {
 	border-radius: .3em;
 	background: var(--btn-1-bg);
-	margin: 1em;
-	position: absolute;
-	bottom: 0;
-	left: 0;
 	cursor: pointer;
 	height: 2.0em;
 }
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index be08eb29..edff8a73 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -135,14 +135,15 @@
 </div>
 
 
+<div id="tree_footer">
+	<div id="spaceFree" style="display: block;">{{ space_free }} free of {{ space_total }}</div>
+
+	<div id="space_bar" style="display: block; cursor: default;">
+		<div id="spaceTotal_bar"></div>
+		<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
+	</div>
+
 	<div id="acc_button" class="popup_button">
-		<div id="spaceFree" style="display: block;">{{ space_free }} free of {{ space_total }}</div>
-
-		<div id="space_bar" style="display: block; cursor: default;">
-			<div id="spaceTotal_bar"></div>
-			<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
-		</div>
-
 		<div id="acc_btnContent">
 			<p id="acc_name"></p>
 			<a id="acc_settings" href="#v=cfg" data-dest="cfg">⚙️</a>
@@ -157,6 +158,8 @@
 			</form>
 		</span>
 	</div>
+</div>
+	
 
 	<a id="gridicon_template" class="gridViewIcon tgl btn on"><div class="gridSquare"></div><div class="gridSquare"></div><div class="gridSquare"></div><div class="gridSquare"></div></div></a>
 	<a id="listicon_template" class="listViewIcon tgl btn"><div class="listRow"></div><div class="listRow"></div></div></a>
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 715a8254..7befc3d1 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -1027,7 +1027,7 @@ ebi('tree').innerHTML = (
 	'<ul class="ntree" id="treeul"></ul>\n' +
 	'<div id="thx_ff">&nbsp;</div>'
 );
-ebi('thx_ff').before(ebi('acc_button'));
+ebi('thx_ff').before(ebi('tree_footer'));
 clmod(ebi('tree'), 'sbar', 1);
 ebi('goh').textContent = L.goh;
 QS('#op_mkdir input[type="submit"]').value = L.ab_mkdir;
@@ -7104,7 +7104,7 @@ var treectl = (function () {
 
 		setcvar('--nav-sz', w);
 		ebi('tree').style.width = w;
-		ebi('acc_button').style.width = (iw - 2) + 'em';
+		ebi('tree_footer').style.width = (iw - 2) + 'em';
 		ebi('wrap').style.marginLeft = w2;
 		ebi('widget').style.marginLeft = (iw /1.4) + 'em';
 		onscroll();