ScuttleBot

ui: remove nav scroll indicators

lmata 2026-04-03 19:19 trunk
Commit 6b4392764b30638b23ccc7d1d1bb656a3398099b6519cfd9a39e2edfb5a2d0be
Parent 5d08ef1277a7aa9…
1 file changed +1 -23
~ internal/api/ui/index.html
M internal/api/ui/index.html
+1 -23
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -204,15 +204,10 @@
204204
 nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative; }
205205
 nav::-webkit-scrollbar { display:none; }
206206
 .nav-tab { padding:0 10px; font-size:12px; }
207207
 .header-right { display:none; }
208208
209
- /* scroll indicators */
210
- .nav-scroll-left, .nav-scroll-right { display:none; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:2; align-items:center; justify-content:center; font-size:11px; color:#58a6ff; }
211
- .nav-scroll-left { left:0; background:linear-gradient(90deg,#161b22 40%,transparent); }
212
- .nav-scroll-right { right:0; background:linear-gradient(270deg,#161b22 40%,transparent); }
213
- .nav-scroll-left.visible, .nav-scroll-right.visible { display:flex; }
214209
215210
 /* content: reduce padding, stack grids */
216211
 .pane-inner { padding:12px; gap:12px; }
217212
 .stat-grid { grid-template-columns:1fr !important; }
218213
 .card-body { padding:12px !important; }
@@ -302,20 +297,18 @@
302297
 <header>
303298
 <div class="brand">
304299
 <h1>⬡ scuttlebot</h1>
305300
 <span>agent coordination backplane</span>
306301
 </div>
307
- <nav id="main-nav">
308
- <span class="nav-scroll-left" id="nav-scroll-left">‹</span>
302
+ <nav>
309303
 <div class="nav-tab active" id="tab-status" onclick="switchTab('status')">◈ status</div>
310304
 <div class="nav-tab" id="tab-users" onclick="switchTab('users')">◉ users</div>
311305
 <div class="nav-tab" id="tab-agents" onclick="switchTab('agents')">◎ agents</div>
312306
 <div class="nav-tab" id="tab-channels" onclick="switchTab('channels')">◎ channels</div>
313307
 <div class="nav-tab" id="tab-chat" onclick="switchTab('chat')">◌ chat</div>
314308
 <div class="nav-tab" id="tab-ai" onclick="switchTab('ai')">✦ ai</div>
315309
 <div class="nav-tab" id="tab-settings" onclick="switchTab('settings')">⚙ settings</div>
316
- <span class="nav-scroll-right visible" id="nav-scroll-right">›</span>
317310
 </nav>
318311
 <div class="header-right">
319312
 <span id="header-user-display" style="font-size:12px;color:#8b949e"></span>
320313
 <button class="sm" onclick="logout()">sign out</button>
321314
 </div>
@@ -2973,26 +2966,11 @@
29732966
 allow_insecure: document.getElementById('tls-allow-insecure').checked,
29742967
 }
29752968
 }, 'tls-config-save-result');
29762969
 }
29772970
2978
-// --- nav scroll indicators ---
2979
-(function() {
2980
- const nav = document.getElementById('main-nav');
2981
- const left = document.getElementById('nav-scroll-left');
2982
- const right = document.getElementById('nav-scroll-right');
2983
- if (!nav || !left || !right) return;
2984
- function update() {
2985
- left.classList.toggle('visible', nav.scrollLeft > 4);
2986
- right.classList.toggle('visible', nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 4);
2987
- }
2988
- nav.addEventListener('scroll', update, { passive: true });
2989
- window.addEventListener('resize', update);
2990
- update();
2991
-})();
2992
-
29932971
 // --- init ---
29942972
 function loadAll() { loadStatus(); loadAgents(); loadSettings(); startMetricsPoll(); }
29952973
 initAuth();
29962974
 </script>
29972975
 </body>
29982976
 </html>
29992977
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -204,15 +204,10 @@
204 nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative; }
205 nav::-webkit-scrollbar { display:none; }
206 .nav-tab { padding:0 10px; font-size:12px; }
207 .header-right { display:none; }
208
209 /* scroll indicators */
210 .nav-scroll-left, .nav-scroll-right { display:none; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:2; align-items:center; justify-content:center; font-size:11px; color:#58a6ff; }
211 .nav-scroll-left { left:0; background:linear-gradient(90deg,#161b22 40%,transparent); }
212 .nav-scroll-right { right:0; background:linear-gradient(270deg,#161b22 40%,transparent); }
213 .nav-scroll-left.visible, .nav-scroll-right.visible { display:flex; }
214
215 /* content: reduce padding, stack grids */
216 .pane-inner { padding:12px; gap:12px; }
217 .stat-grid { grid-template-columns:1fr !important; }
218 .card-body { padding:12px !important; }
@@ -302,20 +297,18 @@
302 <header>
303 <div class="brand">
304 <h1>⬡ scuttlebot</h1>
305 <span>agent coordination backplane</span>
306 </div>
307 <nav id="main-nav">
308 <span class="nav-scroll-left" id="nav-scroll-left">‹</span>
309 <div class="nav-tab active" id="tab-status" onclick="switchTab('status')">◈ status</div>
310 <div class="nav-tab" id="tab-users" onclick="switchTab('users')">◉ users</div>
311 <div class="nav-tab" id="tab-agents" onclick="switchTab('agents')">◎ agents</div>
312 <div class="nav-tab" id="tab-channels" onclick="switchTab('channels')">◎ channels</div>
313 <div class="nav-tab" id="tab-chat" onclick="switchTab('chat')">◌ chat</div>
314 <div class="nav-tab" id="tab-ai" onclick="switchTab('ai')">✦ ai</div>
315 <div class="nav-tab" id="tab-settings" onclick="switchTab('settings')">⚙ settings</div>
316 <span class="nav-scroll-right visible" id="nav-scroll-right">›</span>
317 </nav>
318 <div class="header-right">
319 <span id="header-user-display" style="font-size:12px;color:#8b949e"></span>
320 <button class="sm" onclick="logout()">sign out</button>
321 </div>
@@ -2973,26 +2966,11 @@
2973 allow_insecure: document.getElementById('tls-allow-insecure').checked,
2974 }
2975 }, 'tls-config-save-result');
2976 }
2977
2978 // --- nav scroll indicators ---
2979 (function() {
2980 const nav = document.getElementById('main-nav');
2981 const left = document.getElementById('nav-scroll-left');
2982 const right = document.getElementById('nav-scroll-right');
2983 if (!nav || !left || !right) return;
2984 function update() {
2985 left.classList.toggle('visible', nav.scrollLeft > 4);
2986 right.classList.toggle('visible', nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 4);
2987 }
2988 nav.addEventListener('scroll', update, { passive: true });
2989 window.addEventListener('resize', update);
2990 update();
2991 })();
2992
2993 // --- init ---
2994 function loadAll() { loadStatus(); loadAgents(); loadSettings(); startMetricsPoll(); }
2995 initAuth();
2996 </script>
2997 </body>
2998 </html>
2999
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -204,15 +204,10 @@
204 nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative; }
205 nav::-webkit-scrollbar { display:none; }
206 .nav-tab { padding:0 10px; font-size:12px; }
207 .header-right { display:none; }
208
 
 
 
 
 
209
210 /* content: reduce padding, stack grids */
211 .pane-inner { padding:12px; gap:12px; }
212 .stat-grid { grid-template-columns:1fr !important; }
213 .card-body { padding:12px !important; }
@@ -302,20 +297,18 @@
297 <header>
298 <div class="brand">
299 <h1>⬡ scuttlebot</h1>
300 <span>agent coordination backplane</span>
301 </div>
302 <nav>
 
303 <div class="nav-tab active" id="tab-status" onclick="switchTab('status')">◈ status</div>
304 <div class="nav-tab" id="tab-users" onclick="switchTab('users')">◉ users</div>
305 <div class="nav-tab" id="tab-agents" onclick="switchTab('agents')">◎ agents</div>
306 <div class="nav-tab" id="tab-channels" onclick="switchTab('channels')">◎ channels</div>
307 <div class="nav-tab" id="tab-chat" onclick="switchTab('chat')">◌ chat</div>
308 <div class="nav-tab" id="tab-ai" onclick="switchTab('ai')">✦ ai</div>
309 <div class="nav-tab" id="tab-settings" onclick="switchTab('settings')">⚙ settings</div>
 
310 </nav>
311 <div class="header-right">
312 <span id="header-user-display" style="font-size:12px;color:#8b949e"></span>
313 <button class="sm" onclick="logout()">sign out</button>
314 </div>
@@ -2973,26 +2966,11 @@
2966 allow_insecure: document.getElementById('tls-allow-insecure').checked,
2967 }
2968 }, 'tls-config-save-result');
2969 }
2970
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2971 // --- init ---
2972 function loadAll() { loadStatus(); loadAgents(); loadSettings(); startMetricsPoll(); }
2973 initAuth();
2974 </script>
2975 </body>
2976 </html>
2977

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button