From b5326ce3b2130bd89689606cb2290501832d910f Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Mon, 6 Apr 2026 17:01:03 +0800
Subject: [PATCH] fix(studio): only render MobileNavigationBar on mobile
 viewports (#44565)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MobileNavigationBar was always mounted on desktop, triggering
unnecessary org/project queries even though it's visually hidden with
`md:hidden`. Now only rendered when the viewport is at or below the md
breakpoint.

**Changed:**
- Conditionally render `MobileNavigationBar` using `useBreakpoint('md')`
so it only mounts on mobile

## To test

- Open Studio on a desktop viewport – verify the mobile nav bar is not
in the DOM and no unnecessary requests fire
- Resize to a mobile viewport – verify the mobile nav bar appears and
works normally

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Bug Fixes
* Mobile navigation bar now correctly displays only on mobile devices
based on screen size, improving responsive design behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 apps/studio/components/layouts/DefaultLayout.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/studio/components/layouts/DefaultLayout.tsx b/apps/studio/components/layouts/DefaultLayout.tsx
index 630f6fee100..42b9c00aff7 100644
--- a/apps/studio/components/layouts/DefaultLayout.tsx
+++ b/apps/studio/components/layouts/DefaultLayout.tsx
@@ -1,4 +1,4 @@
-import { LOCAL_STORAGE_KEYS, useParams } from 'common'
+import { LOCAL_STORAGE_KEYS, useBreakpoint, useParams } from 'common'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect, useState } from 'react'
 import { ResizablePanel, ResizablePanelGroup, SidebarProvider } from 'ui'
@@ -57,6 +57,8 @@ export const DefaultLayout = ({
 
   useCheckLatestDeploy()
 
+  const isMobile = useBreakpoint('md')
+
   const contentMinSizePercentage = 50
   const contentMaxSizePercentage = 70
 
@@ -82,10 +84,12 @@ export const DefaultLayout = ({
                 {/* Top Banner */}
                 <AppBannerWrapper />
                 <div className="flex-shrink-0">
-                  <MobileNavigationBar
-                    hideMobileMenu={hideMobileMenu}
-                    backToDashboardURL={backToDashboardURL}
-                  />
+                  {isMobile && (
+                    <MobileNavigationBar
+                      hideMobileMenu={hideMobileMenu}
+                      backToDashboardURL={backToDashboardURL}
+                    />
+                  )}
                   <LayoutHeader headerTitle={headerTitle} backToDashboardURL={backToDashboardURL} />
                 </div>
                 {/* Main Content Area */}