From 3d2393e474a9626d86a15c3c7bcfa40d0db40312 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 12 Feb 2026 15:57:16 +0300
Subject: [PATCH] Fix tab jump on page reload and add config grid spacing

Apply saved active tab from localStorage via inline script during HTML
parse to prevent visible tab switch after page becomes visible.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/src/wled_controller/static/app.js     |  8 ++++----
 server/src/wled_controller/static/index.html | 14 ++++++++++++--
 server/src/wled_controller/static/style.css  |  1 +
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/server/src/wled_controller/static/app.js b/server/src/wled_controller/static/app.js
index 31b60fa..3cbbe88 100644
--- a/server/src/wled_controller/static/app.js
+++ b/server/src/wled_controller/static/app.js
@@ -410,15 +410,15 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize locale first
     await initLocale();
 
-    // Show content now that translations are loaded
-    document.body.style.visibility = 'visible';
-
     // Load API key from localStorage
     apiKey = localStorage.getItem('wled_api_key');
 
-    // Restore active tab (after API key is loaded)
+    // Restore active tab before showing content to avoid visible jump
     initTabs();
 
+    // Show content now that translations are loaded and tabs are set
+    document.body.style.visibility = 'visible';
+
     // Setup form handler
     document.getElementById('add-device-form').addEventListener('submit', handleAddDevice);
 
diff --git a/server/src/wled_controller/static/index.html b/server/src/wled_controller/static/index.html
index 023f61f..5797497 100644
--- a/server/src/wled_controller/static/index.html
+++ b/server/src/wled_controller/static/index.html
@@ -34,11 +34,11 @@
 
         <div class="tabs">
             <div class="tab-bar">
-                <button class="tab-btn active" data-tab="targets" onclick="switchTab('targets')"><span data-i18n="targets.title">⚡ Targets</span></button>
+                <button class="tab-btn" data-tab="targets" onclick="switchTab('targets')"><span data-i18n="targets.title">⚡ Targets</span></button>
                 <button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Sources</span></button>
             </div>
 
-            <div class="tab-panel active" id="tab-targets">
+            <div class="tab-panel" id="tab-targets">
                 <div id="targets-panel-content">
                     <div class="loading-spinner"></div>
                 </div>
@@ -50,6 +50,16 @@
                 </div>
             </div>
 
+            <script>
+                // Apply saved tab immediately during parse to prevent visible jump
+                (function() {
+                    var saved = localStorage.getItem('activeTab');
+                    if (saved === 'devices') saved = 'targets';
+                    if (!saved || !document.getElementById('tab-' + saved)) saved = 'targets';
+                    document.querySelectorAll('.tab-btn').forEach(function(btn) { btn.classList.toggle('active', btn.dataset.tab === saved); });
+                    document.querySelectorAll('.tab-panel').forEach(function(panel) { panel.classList.toggle('active', panel.id === 'tab-' + saved); });
+                })();
+            </script>
         </div>
 
         <footer class="app-footer">
diff --git a/server/src/wled_controller/static/style.css b/server/src/wled_controller/static/style.css
index 94f8cec..decd0aa 100644
--- a/server/src/wled_controller/static/style.css
+++ b/server/src/wled_controller/static/style.css
@@ -1940,6 +1940,7 @@ input:-webkit-autofill:focus {
     grid-template-columns: auto 1fr;
     gap: 8px 12px;
     align-items: center;
+    margin-top: 12px;
 }
 
 .config-grid-label {