gavindiaz/world-intel-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: layer panel + alert banner positioning below dynamic topbar

Browse Source 
_syncLayersTop() now measures both topbar height and alert banner,
positioning layers panel below both. Alert banner also uses
--layers-top CSS var so it tracks topbar height changes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Marc Shade
2026-02-24 17:22:35 -05:00
parent a65a84523f
commit b9eb85bb64
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/world_intel_mcp/dashboard/index.html
+9 -4
View File
@@ -289,8 +289,8 @@ a { color: var(--accent); text-decoration: none; }
/* ═══════════════ ALERT BANNER ═══════════════ */
#alertBanner {
position: fixed; top: 54px; left: 220px; right: 360px; z-index: 45;
max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease);
position: fixed; top: var(--layers-top, 66px); left: 220px; right: 360px; z-index: 45;
max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), top 0.2s;
}
#alertBanner.show { max-height: 90px; }
.alert-strip {
@@ -2625,12 +2625,17 @@ $('#layers .panel-title').addEventListener('click', function() {
$('#layers').classList.toggle('layers-open');
});
// Auto-position layer panel below topbar
// Auto-position layer panel + alert banner below topbar
function _syncLayersTop() {
var tb = $('#topBar');
if (tb) {
var h = tb.offsetHeight;
document.documentElement.style.setProperty('--layers-top', (h + 16) + 'px');
var bannerTop = h + 16;
document.documentElement.style.setProperty('--layers-top', bannerTop + 'px');
// Push layers below the alert banner if it's showing
var banner = $('#alertBanner');
var bannerH = (banner && banner.classList.contains('show')) ? banner.offsetHeight + 4 : 0;
$('#layers').style.top = (bannerTop + bannerH) + 'px';
}
}
_syncLayersTop();