From dc9f29770cfc7db95a14e07640a0dc3b4baf7fc2 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Sun, 19 Apr 2026 13:04:30 +0200
Subject: [PATCH] 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>
---
 public/pages/tasks.js    | 5 ++++-
 public/styles/layout.css | 8 ++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index ad7f73c..fa1ccfb 100644
--- a/public/pages/tasks.js
+++ b/public/pages/tasks.js
@@ -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);
     });
   }
 }
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 5075498..23343e2 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -193,6 +193,14 @@
   min-height: var(--target-lg);
   min-width: var(--target-lg);
   text-decoration: none;
+  position: relative;
+}
+
+.nav-item .nav-badge {
+  position: absolute;
+  top: var(--space-1);
+  right: var(--space-1);
+  margin-left: 0;
 }
 
 .nav-item:active {