fix: position overdue nav-badge absolutely to avoid flex layout distortion (closes #56)

The nav-badge was appended as an in-flow flex child, breaking nav-item
layout: on mobile (column flex) it appeared below the label, on desktop
sidebar (row flex + justify-content:center) it was pushed far right via
margin-left:auto. Fix positions it absolutely within the nav-item and
uses DOM API instead of insertAdjacentHTML per project convention.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-04-19 13:04:30 +02:00
parent 39fd25eafc
commit dc9f29770c
2 changed files with 12 additions and 1 deletions
+4 -1
View File
@@ -828,7 +828,10 @@ function updateOverdueBadge() {
document.querySelectorAll('[data-route="/tasks"] .nav-badge').forEach((el) => el.remove());
if (overdue > 0) {
document.querySelectorAll('[data-route="/tasks"]').forEach((el) => {
el.insertAdjacentHTML('beforeend', `<span class="nav-badge">${overdue}</span>`);
const badge = document.createElement('span');
badge.className = 'nav-badge';
badge.textContent = String(overdue);
el.appendChild(badge);
});
}
}