Merge pull request #4182 from ava-labs/fix/mobile-nav-burger-and-stats-chat

Author: owenwahlgren

components/chat/chat-bubble.tsx

@@ -125,6 +125,12 @@ export function ChatBubble() {
     return null;
   }
 
+  // On /stats and /explorer, hide the bubble on mobile via CSS — those pages
+  // are dense (charts, tables, search results) and the floating button steals
+  // tap targets. Desktop still shows it.
+  const hideOnMobile =
+    pathname.startsWith('/stats') || pathname.startsWith('/explorer');
+
   const handleBubbleClick = () => {
     if (state === 'collapsed') {
       setShowPrompt(false);
@@ -167,7 +173,13 @@ export function ChatBubble() {
   };
 
   return (
-    <div className="chatbot-container fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3" data-chatbot>
+    <div
+      className={cn(
+        'chatbot-container fixed bottom-6 right-6 z-50 flex-col items-end gap-3',
+        hideOnMobile ? 'hidden md:flex' : 'flex',
+      )}
+      data-chatbot
+    >
       {/* Prompt tooltip */}
       {mounted && (
         <div

components/navigation/navbar-dropdown-injector.tsx

@@ -1,64 +1,92 @@
 'use client';
 
-import { useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { NavbarDropdown } from './navbar-dropdown';
 
 /**
- * Injects custom navbar dropdown at ≤1023px breakpoint
- * Replaces fumadocs' dropdown which has CSS specificity issues with Tailwind v4
+ * Mounts the custom navbar dropdown at ≤1023px breakpoint.
+ *
+ * Renders via createPortal (not createRoot) so the portal stays inside the
+ * parent React tree and inherits providers like SessionProvider. A previous
+ * createRoot-based version broke when NavbarDropdown started calling
+ * useSession() — the detached root had no provider and the component crashed,
+ * leaving an empty <li> with no burger button.
  */
 export function NavbarDropdownInjector() {
+  const [container, setContainer] = useState<HTMLLIElement | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+
   useEffect(() => {
-    const checkAndInject = () => {
-      const isMobile = window.innerWidth <= 1023;
-      
-      if (!isMobile) {
-        // Remove if exists
-        const existing = document.querySelector('[data-custom-navbar-dropdown]');
-        if (existing) {
-          existing.remove();
-        }
-        return;
-      }
+    const update = () => setIsMobile(window.innerWidth <= 1023);
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
 
-      const navbar = document.querySelector('nav[aria-label="Main"]') || document.querySelector('header[aria-label="Main"]');
-      if (!navbar) return;
+  useEffect(() => {
+    if (!isMobile) {
+      document
+        .querySelectorAll('[data-custom-navbar-dropdown]')
+        .forEach((el) => el.remove());
+      setContainer(null);
+      return;
+    }
 
-      // Check if already exists
-      if (navbar.querySelector('[data-custom-navbar-dropdown]')) {
-        return;
-      }
+    let injected: HTMLLIElement | null = null;
+    let cancelled = false;
 
-      // Find the right side container (where search icon is)
-      const rightContainer = navbar.querySelector('ul.flex.flex-row.items-center.ms-auto') ||
-                            navbar.querySelector('ul.ms-auto');
-      if (!rightContainer) return;
+    const tryInject = (): boolean => {
+      if (cancelled) return false;
 
-      // Create container
-      const container = document.createElement('li');
-      container.setAttribute('data-custom-navbar-dropdown', 'true');
-      container.className = 'list-none';
-      
-      // Append at the end (after search icon)
-      rightContainer.appendChild(container);
+      const navbar =
+        document.querySelector('nav[aria-label="Main"]') ||
+        document.querySelector('header[aria-label="Main"]');
+      if (!navbar) return false;
 
-      // Render React component
-      const root = createRoot(container);
-      root.render(<NavbarDropdown />);
+      const existing = navbar.querySelector<HTMLLIElement>(
+        '[data-custom-navbar-dropdown]',
+      );
+      if (existing) {
+        injected = existing;
+        setContainer(existing);
+        return true;
+      }
+
+      const rightContainer =
+        navbar.querySelector('ul.flex.flex-row.items-center.ms-auto') ||
+        navbar.querySelector('ul.ms-auto');
+      if (!rightContainer) return false;
+
+      const li = document.createElement('li');
+      li.setAttribute('data-custom-navbar-dropdown', 'true');
+      li.className = 'list-none';
+      rightContainer.appendChild(li);
+      injected = li;
+      setContainer(li);
+      return true;
     };
 
-    checkAndInject();
-    const resizeHandler = () => checkAndInject();
-    window.addEventListener('resize', resizeHandler);
-    const timeout = setTimeout(checkAndInject, 100);
+    if (tryInject()) {
+      return () => {
+        cancelled = true;
+        if (injected?.parentNode) injected.parentNode.removeChild(injected);
+      };
+    }
+
+    // Navbar wasn't ready yet — watch for it to appear / re-render.
+    const observer = new MutationObserver(() => {
+      if (tryInject()) observer.disconnect();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
 
     return () => {
-      window.removeEventListener('resize', resizeHandler);
-      clearTimeout(timeout);
+      cancelled = true;
+      observer.disconnect();
+      if (injected?.parentNode) injected.parentNode.removeChild(injected);
     };
-  }, []);
+  }, [isMobile]);
 
-  return null;
+  if (!container) return null;
+  return createPortal(<NavbarDropdown />, container);
 }
-