From e8f9bbe08d6c5e88380ac2129e1bf89cb4272c40 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@hennecke.com>
Date: Wed, 10 Jun 2026 09:42:41 +0200
Subject: [PATCH] use number input for corner radius setting

---
 copyparty/web/browser.css | 1 +
 copyparty/web/browser.js  | 9 ++++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index e9a20ae4..e49f059b 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -2040,6 +2040,7 @@ html.y #ops svg circle {
 }
 #pathBar input[type=text],
 .opview select,
+.opview input[type=number],
 .opview input[type=text],
 .opview input[type=color],
 .opview input[type=date] {
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 289c9de6..05078e50 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -1314,7 +1314,7 @@ ebi('op_cfg').innerHTML = (
 	'			<input type="text" id="accent" placeholder="#color"></input>' +
 	'			<input type="color" id="accent_picker"></input>' +
 	'		</div>' +
-'			<input tt="' + L.cl_radius +'" type="text" id="radius" placeholder="[0-inf]"></input>' +
+'			<input tt="' + L.cl_radius +'" type="number" id="radius" min="-1" placeholder="[0-inf]"></input>' +
 	'		<a id="fun_tgl" class="tgl btn" tt="' + L.cl_fun + '">🥳</a>\n' +
 	'	</div>\n' +
 	'</div>\n' +
@@ -1527,10 +1527,9 @@ ebi('radius').oninput = function () {
 	if(r === radius)
 		return;
 
-	if(isNaN(r))
-		r = ''
-	swrite('radius', r);
-	var setV = this.value == '' ? '' : (r + 'px');
+	var usefallback = isNaN(r) || r < 0 || r === '';
+	var setV = usefallback ? '' : (r + 'px');
+	swrite('radius', !usefallback && r);
 	document.documentElement.style.setProperty('--radius', setV);
 	console.log(setV);
 }