Sticky header with centered tabs, scroll-spy, and full-width layout

- Move tab bar into header (centered between title and toolbar)
- Make entire header sticky with border-bottom separator
- Remove container max-width for full-width layout
- Add scroll-spy: tree sidebar tracks visible section on scroll
- Remember scroll position per tab when switching
- Remove sticky section headers, use scroll-margin-top instead
- Update sticky offsets to use --sticky-top CSS variable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/css/base.css

@@ -84,8 +84,6 @@ body.modal-open {
 }
 
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
     padding: 20px;
 }
 

server/src/wled_controller/static/css/layout.css

@@ -2,11 +2,12 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 0 12px;
+    padding: 8px 0 8px;
     position: sticky;
     top: 0;
     z-index: 100;
     background: var(--bg-color);
+    border-bottom: 2px solid var(--border-color);
 }
 
 .header-title {
@@ -148,8 +149,6 @@ h2 {
     display: flex;
     align-items: center;
     gap: 4px;
-    border-bottom: 2px solid var(--border-color);
-    margin-bottom: 16px;
 }
 
 .tab-btn {

server/src/wled_controller/static/css/streams.css

@@ -700,7 +700,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
 /* Sub-tab content sections */
 .subtab-section {
     margin-bottom: 24px;
-    scroll-margin-top: var(--header-height, 48px);
+    scroll-margin-top: var(--sticky-top, 90px);
 }
 
 .subtab-section:last-child {
@@ -728,10 +728,6 @@ body.pp-filter-dragging .pp-filter-drag-handle {
     gap: 8px;
     cursor: pointer;
     user-select: none;
-    position: sticky;
-    top: var(--header-height, 0px);
-    z-index: 10;
-    background: var(--bg-color);
     padding: 8px 0;
 }
 

server/src/wled_controller/static/css/tree-nav.css

@@ -13,8 +13,8 @@
     min-width: 210px;
     flex-shrink: 0;
     position: sticky;
-    top: calc(var(--header-height, 48px) + 52px);
-    max-height: calc(100vh - var(--header-height, 48px) - 80px);
+    top: calc(var(--sticky-top, 90px) + 8px);
+    max-height: calc(100vh - var(--sticky-top, 90px) - 24px);
     overflow-y: auto;
     padding: 4px 0;
 }