Post layout for heading is strange on smart phone

[leukios]

• [x] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

• [x] I prepared a reproduction repo, here is the reproduction repo:

https://github.com/leukios/billy/

This repo is the same as the one in the guide, except a heading in the markdown post.

I find the post layout for heading is strange on smart phone. I have tested this on Xiaomi 8 and iPhone SE. The first screenshot is from Xiaomi 8, the second is from iPhone.

• [ ] This issue doesn't need a reproduction repro, here is the steps to reproduce

What is expected?

The heading should not overlap with the tags.

What is actually happening?

The heading overlaps with the tags.

The node version is node 14. The latest vuepress and vuepress blog version.

Other relevant information

• npx vuepress info:

Environment Info:

System: OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa) Binaries: Node: Not Found Yarn: Not Found npm: Not Found Browsers: Chrome: 86.0.4240.183 Firefox: 82.0.2 npmPackages: @vuepress/core: 1.7.1 @vuepress/theme-default: 1.7.1 vuepress: ^1.7.1 => 1.7.1 npmGlobalPackages: vuepress: Not Found

[leukios]

Any reply?

[billyyyyy3320]

Thanks for the report.

[billyyyyy3320]

The bug might only comes with using H1.

[leukios]

@billyyyyy3320 Thanks for the fix