Merge pull request #58 from ulsklyc/fix/56

fix: anchor overdue badge to icon via runtime wrapper

public/pages/tasks.js

@@ -827,11 +827,23 @@ function updateOverdueBadge() {
 
   document.querySelectorAll('[data-route="/tasks"] .nav-badge').forEach((el) => el.remove());
   if (overdue > 0) {
-    document.querySelectorAll('[data-route="/tasks"]').forEach((el) => {
+    document.querySelectorAll('[data-route="/tasks"]').forEach((navItem) => {
+      let anchor = navItem.querySelector('.nav-item__icon-wrap');
+      if (!anchor) {
+        const icon = navItem.querySelector('.nav-item__icon');
+        anchor = document.createElement('span');
+        anchor.className = 'nav-item__icon-wrap';
+        if (icon) {
+          icon.replaceWith(anchor);
+          anchor.appendChild(icon);
+        } else {
+          navItem.prepend(anchor);
+        }
+      }
       const badge = document.createElement('span');
       badge.className = 'nav-badge';
       badge.textContent = String(overdue);
-      el.appendChild(badge);
+      anchor.appendChild(badge);
     });
   }
 }

public/styles/layout.css

@@ -196,10 +196,16 @@
   position: relative;
 }
 
-.nav-item .nav-badge {
+.nav-item__icon-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.nav-item__icon-wrap .nav-badge {
   position: absolute;
-  top: var(--space-1);
-  right: var(--space-1);
+  top: calc(-1 * var(--space-1));
+  right: calc(-1 * var(--space-1));
   margin-left: 0;
 }