fixed a few more top nav bugs

Author: Shannon Anahata

src/components/TopNavClient.tsx

@@ -77,7 +77,6 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
   const platformDropdownRef = useRef<HTMLDivElement>(null);
   const pathname = usePathname();
   const isPlatformsRoute = pathname?.startsWith('/platforms/');
-  const isProductRoot = pathname === '/product/sentry' || pathname === '/product/sentry/';
   const closeTimers = useRef<{products?: NodeJS.Timeout; sdks?: NodeJS.Timeout}>({});
   const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
   const [conceptsDropdownOpen, setConceptsDropdownOpen] = useState(false);
@@ -225,7 +224,11 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
             </svg>
           </button>
         )}
-        <div ref={navRef} className="overflow-x-auto whitespace-nowrap max-w-full scrollbar-hide pr-8 pl-8">
+        <div
+          ref={navRef}
+          className="overflow-x-auto whitespace-nowrap max-w-full scrollbar-hide pr-8 pl-8"
+          style={{scrollbarWidth: 'none', msOverflowStyle: 'none'}}
+        >
           <ul
             className="flex gap-4 w-full items-center overflow-x-visible"
             style={{scrollbarWidth: 'none'}}>
@@ -236,7 +239,7 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
                     <button
                       ref={productsBtnRef}
                       className={`text-[var(--gray-12)] transition-colors duration-150 inline-block py-2 px-1 rounded-t-md flex items-center gap-1 text-[0.875rem] font-normal ${
-                        productsDropdownOpen || isProductRoot
+                        productsDropdownOpen || productSections.some(p => pathname?.startsWith(p.href))
                           ? 'border-b-2 border-[var(--accent-purple)]'
                           : 'hover:text-[var(--accent)]'
                       }`}
@@ -569,7 +572,11 @@ export default function TopNavClient({platforms}: {platforms: Platform[]}) {
         </div>,
         document.body
       )}
-      <style>{`div[role='menu']::-webkit-scrollbar { display: none !important; }`}</style>
+      <style>{`
+        .scrollbar-hide::-webkit-scrollbar {
+          display: none;
+        }
+      `}</style>
     </div>
   );
 }

src/components/header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import {HamburgerMenuIcon} from '@radix-ui/react-icons';
+import {Button} from '@radix-ui/themes';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -80,11 +81,21 @@ export default function Header({
                 showChatBot
                 useStoredSearchPlatforms={useStoredSearchPlatforms}
               />
+              <Button
+                asChild
+                variant="ghost"
+                color="gray"
+                size="3"
+                radius="medium"
+                className="font-medium text-[var(--foreground)] py-2 px-3 uppercase cursor-pointer kapa-ai-class hidden md:flex mr-4"
+              >
+                <a href="https://sentry.io/" target="_blank" rel="noopener noreferrer">Go to Sentry</a>
+              </Button>
               <ThemeToggle />
             </div>
           )}
           {!noSearch && (
-            <div className="flex items-center sm:hidden ml-2 gap-2">
+            <div className="flex items-center sm:hidden ml-2 gap-2 w-full justify-between">
               <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms || []} />
               <ThemeToggle />
             </div>

src/components/search/index.tsx

@@ -319,7 +319,7 @@ export function Search({
             color="gray"
             size="3"
             radius="medium"
-            className="font-medium text-[var(--foreground)] py-2 px-3 uppercase cursor-pointer kapa-ai-class hidden md:flex"
+            className="font-medium text-[var(--foreground)] py-2 px-3 uppercase cursor-pointer kapa-ai-class hidden md:flex mr-4"
           >
             <div>
               <MagicIcon />