Algolia search field collapse behaviour

[nico-bachner]

Describe the bug
Between screen sizes 720px and 751px, the search field is collapsed, but still takes up the space of the expanded version:

This issue seems to be baked into the VitePress default theme.

To Reproduce
Steps to reproduce the behavior:

1. Open a device with screen width larger than 800px (laptop or desktop).
2. Visit any VitePress site (example: https://vitepress.vuejs.org).
3. Slowly resize the browser window, paying special attention when getting to the 751px threshold.
4. Done.

Expected behavior
A clear and concise description of what you expected to happen.

The search field should only collapse at screen sizes smaller than 720px.

System Info

• vitepress version: 0.12.2
• vite version: unknown for https://vitepress.vuejs.org, 2.0.3 for local reproduction.
• Node version: unknown for https://vitepress.vuejs.org, 15.10.0 for local reproduction.
• OS version: unknown for https://vitepress.vuejs.org, MacOS 11.1 for local reproduction.

Additional context
Add any other context about the problem here.

From https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/components/AlgoliaSearchBox.vue:

@media (min-width: 720px) {
  .algolia-search-box {
    padding-left: 8px;
    min-width: 176.3px; /* avoid layout shift */
  }
}
@media (min-width: 751px) {
  .algolia-search-box {
    padding-left: 8px;
  }
  .algolia-search-box .DocSearch-Button-Placeholder {
    padding-left: 8px;
    font-size: 0.9rem;
    font-weight: 500;
  }
}

I still don't quite understand the purpose of the @media (min-width: 751px) {...}, since in other default theme components, the screen width breakpoint is at 720px, but it seems to me that combining the two media queries should solve the problem.

Another solution might be to simply move the min-width: 176.3px; under the @media (min-width: 751px) {...) section.