Fix header position shift when becoming sticky

Move header outside .container so it spans full viewport width with its own padding, eliminating layout shift on scroll. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 19:49:00 +03:00
parent 155bbdbc24
commit 2d847beefa
2 changed files with 2 additions and 2 deletions
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -2,7 +2,7 @@ header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    padding: 8px 0 8px;
+    padding: 8px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
--- a/server/src/wled_controller/templates/index.html
+++ b/server/src/wled_controller/templates/index.html
@@ -29,7 +29,6 @@
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
 </head>
 <body style="visibility: hidden;">
-    <div class="container">
        <header>
            <div class="header-title">
                <span id="server-status" class="status-badge">●</span>
@@ -94,6 +93,7 @@
                </button>
            </div>
        </header>
+    <div class="container">
        <div class="tabs">
            <div class="tab-panel" id="tab-dashboard" role="tabpanel" aria-labelledby="tab-btn-dashboard">
                <div id="dashboard-content">