alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix header position shift when becoming sticky

Browse Source 
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>
This commit is contained in:
Admin
2026-03-10 19:49:00 +03:00
parent 155bbdbc24
commit 2d847beefa
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/src/wled_controller/static/css/layout.css
View File

@@ -2,7 +2,7 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 0 8px; padding: 8px 20px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;

2
server/src/wled_controller/templates/index.html
View File

@@ -29,7 +29,6 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
</head> </head>
<body style="visibility: hidden;"> <body style="visibility: hidden;">
<div class="container">
<header> <header>
<div class="header-title"> <div class="header-title">
<span id="server-status" class="status-badge">●</span> <span id="server-status" class="status-badge">●</span>
@@ -94,6 +93,7 @@
</button> </button>
</div> </div>
</header> </header>
<div class="container">
<div class="tabs"> <div class="tabs">
<div class="tab-panel" id="tab-dashboard" role="tabpanel" aria-labelledby="tab-btn-dashboard"> <div class="tab-panel" id="tab-dashboard" role="tabpanel" aria-labelledby="tab-btn-dashboard">
<div id="dashboard-content"> <div id="dashboard-content">