fix: show the dark mode toast only after the cookie banner is answered

src/components/Footer.astro

@@ -1,11 +1,17 @@
 ---
 import { Image } from "astro:assets";
 import forgejoIcon from "../assets/forgejo.svg";
+
+interface Props {
+	width?: "4xl" | "7xl";
+}
+const { width = "4xl" } = Astro.props;
+const maxWidth = width === "7xl" ? "max-w-7xl" : "max-w-4xl";
 ---
 
-<div class="w-full bg-secondary dark:bg-gray-800 py-8 px-4 transition-colors duration-200">
+<div class="w-full bg-secondary dark:bg-gray-800 py-8 transition-colors duration-200">
 	<div
-		class="max-w-6xl mx-auto flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center"
+		class:list={[maxWidth, "mx-auto px-4 sm:px-6 lg:px-8 flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center"]}
 	>
 		<div
 			class="text-center sm:text-left text-gray-800 dark:text-gray-200 flex flex-col items-center sm:items-start"

src/components/Navbar.astro

@@ -1,11 +1,17 @@
 ---
+interface Props {
+	// Match the page content: 4xl for reading pages, 7xl for posts with the table of contents
+	width?: "4xl" | "7xl";
+}
+const { width = "4xl" } = Astro.props;
+const maxWidth = width === "7xl" ? "max-w-7xl" : "max-w-4xl";
 const currentPath = Astro.url.pathname;
 ---
 
 <nav
 	class="fixed top-0 left-0 right-0 z-50 bg-secondary dark:bg-gray-800 shadow-sm transition-colors duration-200"
 >
-	<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+	<div class={`${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`}>
 		<div class="flex justify-between items-center h-16">
 			<!-- Logo/Brand -->
 			<a

src/layouts/BaseLayout.astro

@@ -69,6 +69,20 @@ const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
 					showTitle: false,
 					textColor: "#000000",
 				},
+				// Let the dark mode toast wait until the cookie banner is gone
+				callback: {
+					onBannerShown: function () {
+						window.__iubBannerOpen = true;
+					},
+					onPreferenceExpressed: function () {
+						window.__iubBannerOpen = false;
+						window.dispatchEvent(new Event("iub-consent"));
+					},
+					onReady: function () {
+						window.__iubReady = true;
+						window.dispatchEvent(new Event("iub-ready"));
+					},
+				},
 			};
 		</script>
 		<script
@@ -310,12 +324,39 @@ const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
 				const hasBeenDismissed = localStorage.getItem(TOAST_DISMISSED_KEY);
 
 				// Only show toast if user is in light mode and hasn't dismissed it
-				setTimeout(() => {
+				const bannerOpen = () =>
+					window.__iubBannerOpen || !!document.getElementById("iubenda-cs-banner");
+				const showToast = () => {
+					if (bannerOpen()) {
+						window.addEventListener("iub-consent", () => setTimeout(showToast, 1500), { once: true });
+						return;
+					}
 					const isDarkMode = document.documentElement.classList.contains("dark");
 					if (!isDarkMode && !hasBeenDismissed && toast) {
 						toast.classList.remove("hidden");
 					}
-				}, 2000);
+				};
+
+				// Never on top of the cookie banner: wait for iubenda, and if the banner
+				// is open wait for the visitor's answer. If iubenda never loads
+				// (blocked), show it anyway after a few seconds.
+				let scheduled = false;
+				const scheduleToast = (delay) => {
+					if (scheduled) return;
+					scheduled = true;
+					setTimeout(showToast, delay);
+				};
+				const afterIubenda = () => {
+					scheduleToast(2000);
+				};
+				if (window.__iubReady) {
+					afterIubenda();
+				} else {
+					window.addEventListener("iub-ready", afterIubenda, { once: true });
+					setTimeout(() => {
+						if (!window.__iubReady) scheduleToast(0);
+					}, 6000);
+				}
 
 				// Enable dark mode
 				if (tryButton) {

src/pages/blog/[slug].astro

@@ -38,7 +38,7 @@ const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
 	modifiedTime={entry.data.updatedDate}
 	tags={entry.data.tags}
 >
-	<Navbar />
+	<Navbar width="7xl" />
 	<div class="min-h-screen pt-16 bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
 		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
 			<div class="flex gap-8 items-start">
@@ -200,5 +200,5 @@ const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
 			</div>
 		</div>
 	</div>
-	<Footer />
+	<Footer width="7xl" />
 </BaseLayout>