Issue #3622795: Fixed page freezing by clipping the edge-to-edge overflow instead of hiding it

Fixes #3622795.

scss/layout/edge2edge.layout.scss ended with body { overflow-x: hidden !important; }, there to hide the horizontal overflow the edge-to-edge band produces: .bg-edge2edge sizes itself from 100vw, which includes the classic scrollbar while the content box does not.

The clipping is not the problem, hidden is. Per CSS Overflow Module Level 3, an overflow-x of hidden forces an overflow-y of visible to compute to auto, so body computed to overflow: hidden auto on every page and was a scroll container on every request. While the body-to-viewport overflow propagation holds the page still scrolls, but anything that stops that propagation, by giving html an overflow of its own, leaves a page that neither the mouse wheel nor the keyboard can move, with a stray scrollbar inside the page.

The change

html,
body {
  overflow-x: hidden !important; // Fallback for browsers without `clip`.
  overflow-x: clip !important;
}

clip clips without creating a scroll container and leaves overflow-y as visible, so vertical scrolling always stays on the viewport. Declaring it on html too makes the viewport authoritative, which also removes the last pixels of sideways scroll and stops anything else setting html { overflow } from bringing the lockup back. The hidden declaration stays first as the fallback for browsers without clip, and the existing !important stays, because it is what beats the admin theme for signed-in users.

Both the Sass source and its compiled twin in css/layout/edge2edge.layout.css are updated, with the reasoning as a comment in the Sass so the next person does not change it back to hidden.

Vartheme BS5 Educare is a clone of Vartheme BS5 and carries its own copy of the declaration. Fixed upstream in #3622794 (MR !214, merged), where the reasoning and the measurements were first recorded.

Verification

Measured upstream on Drupal 11.4.6 with Vartheme BS5 5.0.2, across 5 pages x 4 screen sizes (1568x744, 1400x800, 768x900, 390x844) x anonymous and administrator, 30 combinations:

	Before	After
html computed overflow	visible / visible	clip / visible
body computed overflow	hidden / auto	clip / visible
Mouse wheel	scrolls	scrolls
End key	reaches bottom	reaches bottom
Horizontal scroll reachable	16px	0

The sticky header still sticks and the full-bleed edge-to-edge sections are geometrically unchanged. This theme carries the identical declaration, so the same result applies, but it has NOT been separately re-measured on a Vartheme BS5 Educare site.

Not in this change

The underlying cause of the overflow, --e2e-band measuring from 100vw rather than a scrollbar-free width, is untouched. The clipping still covers it, and it no longer costs a scroll container. Worth its own issue.

AI was used in the investigation and in drafting this change. The CSS behaviour described was measured in a browser and checked against the specification, not taken from the model.

Checkpoints:

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Developer Documentation
• User Guide Documentation
• Reviewed by human
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release