Better Docs Layout for Small Screen

[jswildcards]

What problem does this feature solve?

It is actually a layout problem of vue-router-next documentation. Please accept my apology if I reported it in the wrong place.

Currently, the official documentation site layout is not worked as expected when it comes to the screen size with 959px and 719px breakpoints.

Unexpected behaviours with breakpoints:

• 959px: 16.4rem is applied to margin-left in the main section.
• 719px: var(--sidebar-width) is applied to padding-left in the main section.

As a result, the main content is hard to read when readers are using small-size screens, such as mobile phones, as the unexpected extra spaces are occupied.

What does the proposed API look like?

I haven't used 'vitepress' before so I don't know if it is actually an issue of vitepress. But I have a 'temporary' solution for this issue:

In /docs/.vitepress/theme/Layout.vue:

<style>
...

/* Fix: Unexpected margin at 959px breakpoint */
@media screen and (max-width: 959px) {
  .theme main {
    margin-left: 0;
  }
}

/* Fix: Unexpected padding at 719px breakpoint */
@media screen and (max-width: 719px) {
  .theme main {
    padding-left: 0;
  }
}
</style>

And it should fix the layout problem existed.

I believe that small changes can bring a big positive effect on the community. Thank you for reviewing this issue.

[posva]

@jswildcards Thanks for noticing! I'm transferring to vitepress as the problem seems to also exist in https://next.vuex.vuejs.org