fix(theme): clip overflowed navbar menu

[bluwy]

Description

In the navbar, make the navbar menu flex-grow: 1 (instead of the search bar) and clip it if there's no more space left, e.g. the screen isn't wide enough. Now, the navbar shouldn't ever exceed the screen width and cause the scrolling in the first place

I'll make some comments below explaining some of the changes.

Here's also a video of the new behaviour:

vitepress-navbar.mp4

Linked Issues

fix #2842

Additional Context

In the linked issue, the scrolling happened in the first place on smaller screens is because the navbar became position: relative, while in larger screens it was position: fixed. I decided to fix this differently by making the navbar menu properly clipped in both cases instead.

---

Tip

The author can publish a preview release by commenting /publish after creating the PR.

[bluwy]

This was removed because of a Safari bug that causes the menu to get wrongly clipped. It was also reported in #5050 before.

I noticed an easy fix here is to not use transform here (as it's also not doing anything). This could break for users that set translateY(-2px) or something to have a cool floating effect, but I think it's fine? Alternative I also found that setting will-change: transform fixes it, but this technically incurs some small perf overhead for everyone.

[bluwy]

This min-width: 0 (on the flex item parent) allows shrinking the content beyond its content, same for the min-width: 0 in VPNavBarMenu. Both is needed to work.