From 94c269486a0641caf6042f51096961b84deb6f4d Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@hennecke.com>
Date: Mon, 27 Apr 2026 12:51:03 +0200
Subject: [PATCH] bbox extended vertical clickable button area for switching
 images

---
 copyparty/web/baguettebox.js |  4 ++--
 copyparty/web/browser.css    | 30 ++++++++++++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js
index 4eeb4e64..315ba118 100644
--- a/copyparty/web/baguettebox.js
+++ b/copyparty/web/baguettebox.js
@@ -305,8 +305,8 @@ window.baguetteBox = (function () {
             ctr.innerHTML = (
                 '<div id="bbox-overlay" role="dialog">' +
                 '<div id="bbox-slider"></div>' +
-                '<a id="bbox-prev" class="btn" aria-label="Previous">◀</a>' +
-                '<a id="bbox-next" class="btn" aria-label="Next">▶</a>' +
+                '<div id="bbox-prev"><a class="btn" aria-label="Previous">◀</a></div>' +
+                '<div id="bbox-next"><a class="btn" aria-label="Next">▶</a></div>' +
                 '<div id="bbox-btns">' +
                 '<a id="bbox-help" class="btn">?</a>' +
                 '<a id="bbox-anim" class="btn" tt="a">-</a>' +
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 564e14d8..298720f6 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -2612,6 +2612,24 @@ html.y #bbox-overlay figcaption a {
 }
 #bbox-overlay #bbox-next,
 #bbox-overlay #bbox-prev {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	width: 70px;
+	left: 0;
+	cursor: pointer;
+}
+#bbox-overlay #bbox-next {
+	right: 0;
+	left: auto;
+}
+#bbox-overlay #bbox-next:hover a,
+#bbox-overlay #bbox-prev:hover a {
+	background: #fff2;
+	background: var(--btn-h-bg);
+}
+#bbox-overlay #bbox-next a,
+#bbox-overlay #bbox-prev a {
 	position: fixed;
 	top: 50%;
 	top: calc(50% - 30px);
@@ -2627,8 +2645,8 @@ html.y #bbox-overlay figcaption a {
 #bbox-btns .btn {
 	cursor: pointer;
 }
-#bbox-overlay.immersive #bbox-next,
-#bbox-overlay.immersive #bbox-prev {
+#bbox-overlay.immersive #bbox-next a,
+#bbox-overlay.immersive #bbox-prev a {
 	opacity: 0;
 }
 #bbox-overlay.immersive #bbox-btns {
@@ -2652,10 +2670,10 @@ html.y #bbox-overlay figcaption a {
 #bbox-overlay .btn:hover {
 	opacity: 1 !important;
 }
-#bbox-next {
+#bbox-next a {
 	right: 1%;
 }
-#bbox-prev {
+#bbox-prev a {
 	left: 1%;
 }
 #bbox-btns {
@@ -3938,8 +3956,8 @@ html.e #wrap.thin {
 	.dropdesc>div>div {
 		transition: none;
 	}
-	#bbox-next,
-	#bbox-prev,
+	#bbox-next a,
+	#bbox-prev a,
 	#bbox-btns {
 		transition: background-color .3s ease, color .3s ease;
 	}