Inconsistent mobile/desktop breakpoint between NavBar and Search Component at 768px

[ChisakaKanako]

Describe the bug

There is a UI inconsistency regarding the mobile/desktop media query breakpoints at exactly 768px width.
Currently, when the viewport width is exactly 768px:

• The Navigation Bar switches to the Desktop view (min-width: 768px).
• However, the Search Component still displays in the Mobile view (it seems to switch to desktop only at min-width: 769px).
  This creates a mismatched UI state at 768px where the header is in desktop mode, but clicking the search behaves like the mobile version.

Reproduction

	Navigation Bar	Search Component
767px
768px
769px

Expected behavior

The breakpoints should be unified. The Navigation Bar and the Search Component should transition from mobile to desktop at the exact same width.
To fix this, the layout breakpoint should probably be adjusted so that the desktop view starts at min-width: 769px (and mobile ends at max-width: 768px), aligning it with the search component's behavior.

System Info

*

Additional context

For now, I managed to fix this issue temporarily by injecting a custom Vite plugin in .vitepress/config.ts

// .vitepress/config.ts
export default {
  vite: {
    plugins: [
      { 
        name: 'fix-breakpoints', 
        transform: c => c.replace(/min-width: 768/g, 'min-width: 769').replace(/max-width: 767/g, 'max-width: 768') 
      }
    ]
  }
}

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[pupuking723]

I can look into this if maintainers agree this should be handled in VitePress. I would first reduce the breakpoint behavior to a small docs fixture, then keep the fix limited to the shared breakpoint/search trigger behavior so the NavBar and local search switch at the same width. I will wait for confirmation or assignment before opening a PR.