From 82ee5037e394cb11ce58c734141ee606dfba410e Mon Sep 17 00:00:00 2001
From: "mergify[bot]" <37929162+mergify[bot]@users.noreply.github.com>
Date: Wed, 17 Jun 2026 15:26:11 -0400
Subject: Fix Cookiebot consent dialog rendering unstyled and breaking the page
 (#2108) (#2109)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a fresh (no-consent) load the consent banner could render completely
unstyled and expand to full page height. Cookiebot delivers its dialog CSS as
a constructed stylesheet on document.adoptedStyleSheets; ReadTheDocs'
readthedocs-addons.js reassigns that whole-array property with a destructive
replace, and when that lands after Cookiebot's network-gated adoption it drops
Cookiebot's sheet, leaving #CybotCookiebotDialog at position:static expanded to
~6700px. It is a race, so it is intermittent and clears once consent is given
(the dialog then never renders).

- layout.html: a small adoptedStyleSheets shim, installed before any page
  script, that preserves Cookiebot's sheet so another library cannot drop it.
- custom.css: a leak-safe safety net that keeps the dialog contained even if
  its adopted sheet is ever absent. It uses only properties Cookiebot itself
  sets, so it has verifiably no effect on the normal, styled banner.

🤖 Generated by [robots](https://vyos.io)

(cherry picked from commit dce7bb521e3947af59fe18895b609ec353e0450e)

Co-authored-by: Yuriy Andamasov <yuriy@vyos.io>
---
 docs/_static/css/custom.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'docs/_static/css/custom.css')

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index cdb036d2..c19f436b 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -532,4 +532,28 @@ html {
 	.closeButtonDivLine {
 		bottom: 85px;
 	}
+}
+
+/* Cookiebot consent dialog — safety net (defense-in-depth).
+   Cookiebot delivers its dialog styling as a constructed stylesheet on
+   document.adoptedStyleSheets. The adoptedStyleSheets shim in layout.html keeps that
+   sheet from being dropped by another library (e.g. ReadTheDocs' readthedocs-addons.js,
+   which reassigns the whole list with a destructive replace). As a backstop, these
+   rules live in a regular stylesheet — which cascades *before* adopted stylesheets, so
+   Cookiebot's own CSS overrides every one of them whenever its sheet is present, and
+   they have no effect on the normal styled banner. They only take effect if that sheet
+   is ever absent, keeping the dialog a contained, scrollable, centered panel instead of
+   falling back to position:static and expanding to full page height. Only properties
+   Cookiebot itself sets are used here, so there is verifiably no leak into the good state. */
+#CybotCookiebotDialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-width: 920px;
+	max-height: 90vh;
+	overflow: auto;
+	background: #fff;
+	box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
+	z-index: 2147483631;
 }
\ No newline at end of file
-- 
cgit v1.2.3