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

@@ -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);
 

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">

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 {