vitepress

vitepress copied to clipboard

Is your feature request related to a problem? Please describe.

Hi, When I was checking my libs docs in mobile I found that in mobile there's no border-radius and code block hits the border of mobile (due to negative margin on left & right).

Later I found that it is intentional and VuePress is also doing the same.

However, I want to point out where it fails.

If we have indented code block then it looks like this:

1. Remove anu plugin use in `main.js` file if you haven't

    ```diff
    -  import { anu } from 'anu-vue'

      createApp(App)
    -   .use(anu)
        .mount('#app')
    ```

Describe the solution you'd like

1. Remove the negative margins
2. Remove breakpoint for adding border-radisu (apply border radius on all screens)

Describe alternatives you've considered

Revering styles:

.vp-doc div[class*='language-']:not(:where(.vp-raw *)) {
    border-radius: 8px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

Additional context

This is how it looks with the new UI:

It aligns perfectly with the content ❤️

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

Ah, this issue is also on https://vitepress.vuejs.org/guide/deploying.html

Later I found that it is intentional and VuePress is also doing the same.

Yeah it was to create more space. But its messing with indented code blocks.

I don't necessarily consider this a bug - the style looks fine to me, and it separates indented vs. non-indented code blocks. It could be more of a personal preference.