Layout issue on high-DPI screens due to fixed width: 65em on <html> tag
I'm experiencing a layout issue when viewing the sudo documentation site on a 4K display with 150% scaling in Windows. On certain pages, the content is constrained to the left side of the screen, while the right side remains completely black and unused.
Upon inspecting the page with the browser's developer tools, I noticed that the <html> tag has a fixed width: 65em applied via CSS. This seems to be causing the layout to break on high-resolution screens with scaling enabled. When I manually remove this width property, the layout adjusts correctly and uses the full available space.
This issue appears inconsistently, only on some pages of the site.
Steps to reproduce:
- Use a 4K monitor with 150% scaling in Windows.
- Navigate to affected pages on the sudo documentation site (https://www.sudo.ws/docs/man/sudo.man/).
- Observe that content is aligned to the left with a large empty area on the right.
- Open developer tools and inspect the <html> tag.
- Remove width: 65em and see the layout fix itself.
Expected behavior: Content should adapt to the screen size and scaling, using the full width appropriately.
Additional context: I've attached a screenshot showing the issue, including the developer tools highlighting the problematic CSS rule.
<img width="3838" height="1968" alt="Image" src="https://github.com/user-attachments/assets/87ebfb4e-e0b8-4e81-bebf-7c6cb697f12d" />
0 条评论