Description
I'm submitting a...
- Regression
- Bug report
- Feature request
- Documentation issue or request (new chapter/page)
- Support request => Please do not submit support request here, instead post your question on Stack Overflow.
Current behavior
Let me start off by saying that I opened this issue only because I struggled to read through the docs when trying to learn NestJS, because of the lack of margins entirely on larger viewports. And I believe I may not be alone here.
The NestJS docs website takes up the entire width on high-res displays (4K and higher for example) without any margins on the sides. This results in very long lines (~350 characters per line) which makes it much harder to read compared to 80-90 characters per line for Next.js docs. Quick search online recommends anything less than 100 characters per line for it to be readable (source).
Currently what I do as a temporary fix is to either resize their browser window to take up 50% width of my screen, or zoom in to improve the reading experience (but this makes text larger than I prefer). But I would ideally like to go through the docs with full focus by just reading it in a full-screen window.
Expected behavior
The docs should have proper margins/max-width on high-res displays, similar to other modern docs sites. Looking at some examples, I see 3 kinds of docs layouts (screenshots below):
- Centered content + centered margins on both sides like Next.js, Anthropic (uses Mintlify), and Hono (uses VitePress). This is the best approach in my opinion.
- Centered content but sidebars aligned to screen edges like AdonisJS
- Left-aligned content with a set max-width like Laravel docs (though centered content is easier to read)
All these approaches make it much easier and nicer experience to read through the content - and keeping the width manageable (15-20 words per line in examples above instead of NestJS' current ~45 words per line).
Minimal reproduction of the problem with instructions
- Open docs.nestjs.com on a high-res display (like 1440p/4K). Can replicate the same behaviour by zooming out on a smaller resolution monitor as well.
- Notice how the content spans the entire width without margins
- Compare with Next.js docs or AdonisJS docs to see the difference in readability
What is the motivation / use case for changing the behavior?
Most modern docs sites have max-width/margins for better readability on high-res displays. This is a widely accepted practice in technical documentation as it improves the reading experience significantly.
Environment
Others:
- Tested on 4K (3840x2160) and 1440p (2560x1440) displays
- Affects all major browsers (Chrome, Firefox, Safari)
- Issue is specifically noticeable on high-res displays
Screenshots
Here are some screenshots of some other modern docs sites that have centered layouts:
Next.js (centered content + centered sidebars)
Anthropic (centered content + centered sidebars)
Hono (centered content + centered sidebars)
AdonisJS (centered content + centered sidebars)
Laravel (left aligned content + left aligned sidebar)
NestJS (spans entire display width)