fix(mobile): Fix broken mobile navigation menu

[rahulchhabria]

The mobile navigation had several bugs that made it difficult to use on small screens.

Sidebar doesn't close after navigation — the sidebar toggle is CSS-only (a hidden checkbox + :has() selector). When a user tapped a nav link, the page navigated but the checkbox stayed checked, leaving the sidebar open over the new page content. Fixed by adding a CloseSidebarOnNavigation client component that watches usePathname and unchecks the checkbox on route change.

Header nav not full width — the <nav> inside the fixed header was missing w-full, so it only sized to its content width. This meant the ml-auto on the Menu button had nothing to push against, leaving it clipped instead of flush to the right edge.

Popover opens off-screen — the MobileMenu popover defaulted to align="center" relative to its trigger in the top-right corner, causing it to render partially off the left edge of the screen on narrow viewports. Changed to align="end" so it anchors to the right edge of the trigger.

Sidebar height overflow on mobile — the base .sidebar rule used height: 100vh but the sidebar starts at top: var(--header-height), so it overflowed 80px past the bottom of the screen on mobile (the corrected calc(100vh - var(--header-height)) was only applied inside a min-width: 768px media query). Moved the correct value to the base rule.

Invalid HTML — <li> elements in MobileMenu had no <ul> parent, which is invalid HTML and can cause layout issues in some browsers.

Co-Authored-By: Claude noreply@anthropic.com

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
develop-docs	Ready	Preview, Comment	Mar 7, 2026 9:26pm
sentry-docs	Ready	Preview, Comment	Mar 7, 2026 9:26pm

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Portal-rendered <ul> gets unstyled browser defaults
  • Added Tailwind classes list-none p-0 m-0 to the portal <ul> elements to override browser default margins/padding outside scoped preflight.

Or push these changes by commenting:

@cursor push aae80af66d

Preview (aae80af66d)

diff --git a/src/components/mobileMenu/index.tsx b/src/components/mobileMenu/index.tsx
--- a/src/components/mobileMenu/index.tsx
+++ b/src/components/mobileMenu/index.tsx
@@ -37,14 +37,14 @@
           <Theme accentColor="iris">
             <Popover.Content className={styles.PopoverContent} sideOffset={5} align="end">
               <Box display={{xs: 'block', sm: 'none'}}>
-                <ul>
+                <ul className="list-none p-0 m-0">
                   <li className={styles.MenuItem}>
                     <Search path={pathname} searchPlatforms={searchPlatforms} />
                   </li>
                 </ul>
                 <div className={styles.MenuSeparator} />
               </Box>
-              <ul>
+              <ul className="list-none p-0 m-0">
                 <li className={styles.MenuItem}>
                   <Link href="https://sentry.io/changelog/">Changelog</Link>
                 </li>

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[rahulchhabria]

@cursor push aae80af

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}