header - use list as IntersectionObserver root

src/Header/Header.ts

@@ -5,31 +5,29 @@ import navbarToggleSvg from './navbar-toggle.svg?raw&inline';
 injectStyles(styles);
 
 onElementConnected('header[bt] > nav', (navigation) => {
+  const root = navigation.querySelector(':scope > ul');
+  const target = root?.querySelector(':scope > li:last-child');
+
+  if (!root || !target) {
+    return;
+  }
+
   const observer = new IntersectionObserver(
     (entries) => {
       const entry = entries[0];
-      if (
-        !entry.isIntersecting &&
-        entry.intersectionRect.width !== entry.boundingClientRect.width
-      ) {
+      if (!entry.isIntersecting) {
         navigation.classList.add('overflowing');
       } else {
         navigation.classList.remove('overflowing');
       }
     },
     {
-      root: null,
+      root,
       threshold: 1.0,
     },
   );
 
-  const lastLi = navigation.querySelector('ul > li:last-child');
-
-  if (!lastLi) {
-    return;
-  }
-
-  observer.observe(lastLi);
+  observer.observe(target);
 });
 
 onElementConnected(