UI Fixes — Header & Badge

Date: March 2, 2026

Order Tracking Badge — Click Not Working

Symptom: The floating order tracking badge (shown on all pages when active orders exist) was not responding to clicks. Users had to drag it to interact.

Root Cause: The drag detection threshold was set to 2px. Any slight finger movement during a tap/click exceeded this threshold, causing the interaction to be interpreted as a drag rather than a click.

Fix: Increased drag threshold from 2px to 8px in src/components/Header.tsx. This gives enough tolerance for normal finger/mouse movement during a click while still allowing intentional drags.

Sidebar 403 Errors for Customers

Symptom: Customer accounts browsing /restaurants were generating 403 errors on /api/admin/restaurants?limit=200 in the console.

Root Cause: ManagerSidebar and AdminSidebar components were rendered unconditionally in Header.tsx (lines 425-426), regardless of the current page or user role. ManagerSidebar fires listAllRestaurantsAdmin() on mount via useEffect, which calls an admin-only API endpoint — returning 403 for non-admin users.

Fix: Wrapped sidebar rendering with route-based conditions:

{isManagerMode && <ManagerSidebar ... />}
{isAdminMode && <AdminSidebar ... />}

Where isManagerMode = pathname?.startsWith("/manager") and isAdminMode = pathname?.startsWith("/admin"). Sidebars now only mount when the user is on the corresponding pages.

Files Changed