fix(studio): only render MobileNavigationBar on mobile viewports (#44565)

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

@@ -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 */}