fix(a11y): make content accessible at 200% browser zoom

At 200% zoom a 1280 px display has a CSS viewport of ~640 px, which
triggers the RTD mobile breakpoint at 768 px. However the custom
clamp(800px, ...) keeps a hard 800 px minimum on the content area,
causing horizontal overflow and making the page content unreachable
without horizontal scrolling.

WCAG 1.4.4 (Resize Text) / BITV 9.1.4.4 requires that content be
fully usable up to 200% magnification.

Add a media-query override to remove the width floor at narrow
viewports so the content uses the available space.

Fixes #9678

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Author: skjnldsv

_shared_assets/static/custom.css

@@ -130,6 +130,22 @@ div#list-of-available-icons > blockquote > div > div > p {
 	max-width: 900px;
 }
 
+/* At 200% browser zoom a 1 280 px display has an effective viewport of
+   ~640 px, which is below the RTD mobile breakpoint (768 px). The
+   clamp() above keeps a hard 800 px minimum that then overflows the
+   viewport horizontally, making the documentation content unreachable
+   without horizontal scrolling (WCAG 1.4.4 / BITV 9.1.4.4).
+   Override to 100% so the content fills the available space. */
+@media screen and (max-width: 768px) {
+	.wy-nav-content {
+		max-width: 100% !important;
+	}
+
+	.wy-nav-content section {
+		max-width: 100%;
+	}
+}
+
 table.docutils {
 	min-width: 50%;
 }