From ccc04e2bed5d08d2dc82817dbd3382f6285d229d Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Fri, 15 May 2026 03:12:51 +0200
Subject: [PATCH] eeeeeeeeee

---
 public/s/js/scroller.js | 40 ++++++++++++++++++++++++++++------------
 views/scroller.html     |  2 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/public/s/js/scroller.js b/public/s/js/scroller.js
index fbc2d00..b3a12d9 100644
--- a/public/s/js/scroller.js
+++ b/public/s/js/scroller.js
@@ -1336,11 +1336,7 @@
         }</div>`
       : '';
     meta.innerHTML = `
-      <div class="scroll-meta-inner" style="position:relative;">
-        <button class="js-speed-hold-btn js-meta-speed-btn" aria-hidden="true" tabindex="-1"
-          style="position:absolute; bottom:100%; left:-16px; width:100px; height:100vh;
-                 background:none; border:none; padding:0; cursor:pointer; opacity:0;
-                 pointer-events:all;"></button>
+      <div class="scroll-meta-inner">
         ${badgesHtml}
         <div class="scroll-meta-top">
           <a href="/user/${esc(item.username)}" class="scroll-user-link">
@@ -1366,11 +1362,6 @@
     const actions = document.createElement('div'); actions.className = 'scroll-actions';
     const _i = window.f0ckI18n || {};
     actions.innerHTML = `
-      <button class="js-speed-hold-btn" aria-hidden="true" tabindex="-1"
-        style="position:absolute; bottom:100%; left:-10px; right:-10px; height:100vh;
-               background:none; border:none; padding:0; cursor:pointer; opacity:0;
-               pointer-events:all; flex-shrink:0;"
-        title=""></button>
       ${window.scrollerLoggedIn ? `
       <button class="scroll-btn js-fav-btn${item.is_faved ? ' faved' : ''}" title="${_i.favourite || 'Favourite'} (double-tap)">
         <div class="scroll-btn-icon"><i class="${item.is_faved ? 'fa-solid' : 'fa-regular'} fa-heart"></i></div>
@@ -1409,6 +1400,31 @@
     `;
     slide.appendChild(actions);
 
+    // ── Speed-hold zones (Direct children of slide for maximum reliability) ──
+    // Right zone (above actions)
+    const rightSpeedZone = document.createElement('button');
+    rightSpeedZone.className = 'js-speed-hold-btn';
+    rightSpeedZone.setAttribute('aria-hidden', 'true');
+    rightSpeedZone.tabIndex = -1;
+    Object.assign(rightSpeedZone.style, {
+      position: 'absolute', right: '0', bottom: '0', width: '80px', height: '100vh',
+      background: 'none', border: 'none', padding: '0', cursor: 'pointer', opacity: '0',
+      pointerEvents: 'all', touchAction: 'none', zIndex: '5'
+    });
+    slide.appendChild(rightSpeedZone);
+
+    // Left zone (above meta)
+    const leftSpeedZone = document.createElement('button');
+    leftSpeedZone.className = 'js-speed-hold-btn';
+    leftSpeedZone.setAttribute('aria-hidden', 'true');
+    leftSpeedZone.tabIndex = -1;
+    Object.assign(leftSpeedZone.style, {
+      position: 'absolute', left: '0', bottom: '0', width: '100px', height: '100vh',
+      background: 'none', border: 'none', padding: '0', cursor: 'pointer', opacity: '0',
+      pointerEvents: 'all', touchAction: 'none', zIndex: '5'
+    });
+    slide.appendChild(leftSpeedZone);
+
     // In left-hand mode, inject 4chan action buttons into this slide's actions
     if (leftHandEnabled) {
       if (chanOpenBtn && chanOpenBtn.style.display !== 'none') {
@@ -1472,8 +1488,8 @@
       }, { passive: true });
     };
 
-    wireSpeedHold(actions.querySelector('.js-speed-hold-btn'));
-    wireSpeedHold(slide.querySelector('.js-meta-speed-btn'));
+    wireSpeedHold(rightSpeedZone);
+    wireSpeedHold(leftSpeedZone);
 
 
     const favBtn = actions.querySelector('.js-fav-btn');
diff --git a/views/scroller.html b/views/scroller.html
index e367cda..8eb993c 100644
--- a/views/scroller.html
+++ b/views/scroller.html
@@ -375,7 +375,7 @@
       position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
       background: rgba(255,255,255,.15); z-index: 10; cursor: pointer; transition: height .15s;
     }
-    .scroll-progress-bar:hover { height: 6px; }
+    .scroll-progress-bar:hover { height: 12px; }
     .scroll-progress-fill { height: 100%; background: var(--accent); width: 0%; pointer-events: none; }
     .scroll-progress-thumb {
       position: absolute; top: 50%; right: 0; width: 12px; height: 12px; border-radius: 50%;