Horizontal scrollbar appears on the WordPress.org 404 page

[valani9099]

Title: Horizontal scrollbar appears on the WordPress.org 404 page

The WordPress.org 404 page ​https://wordpress.org/404/ displays an unnecessary horizontal scrollbar at the bottom of the page on desktop browsers.

Steps to reproduce

1. Open ​https://wordpress.org/404/ in a desktop browser.
2. Scroll to the bottom of the page.
3. Observe the horizontal scrollbar.
4. Scroll horizontally and notice that the page extends beyond the visible viewport.

Actual result

A horizontal scrollbar appears even though the visible page content should fit within the viewport.

Expected result

The 404 page should fit within the browser viewport without horizontal scrolling.

Technical details

The overflow appears to be caused by the following element:

.wporg-parent-oops-container

It currently uses:

width: 100vw;

When a vertical scrollbar is present, 100vw includes the scrollbar width and makes the element wider than the document’s available content area.

During testing, the document client width was 1348px while its scroll width was 1363px.

Changing the container width to 100%, or otherwise constraining it to the available viewport width, should prevent the horizontal overflow while preserving the decorative “Oops!” background.

A screenshot highlighting the horizontal scrollbar is attached.

[dineshinau]

I’ve submitted a [pull request](​https://github.com/WordPress/wporg-parent-2021/pull/187/) to address this issue.

The overflow was caused by .wporg-parent-oops-container using width: 100vw, which includes the vertical scrollbar width. The PR changes it to width: 100%.