From 25d883944147a2d145004b208dded18a6a1a4ed7 Mon Sep 17 00:00:00 2001
From: Buco7854 <github@grimbert.net>
Date: Wed, 10 Jun 2026 13:43:15 +0000
Subject: [PATCH] feat: render admin status page preview in an iframe

The preview previously rendered the themed status page inline in the
admin document, so document-global concerns leaked in both directions:
custom CSS spilled into the admin UI and the theme body painting never
showed. Pointing the BrowserFrame at the real public URL in an iframe
isolates the CSS completely and makes the preview pixel-identical to
what visitors see. Auth for unpublished pages keeps working because the
same-origin iframe shares localStorage and the API client reads the
token from the rehydrated store.
---
 client/src/Pages/StatusPage/Status/index.tsx  | 28 +++++++++++--------
 .../StatusPage/Status/themes/BrowserFrame.tsx |  8 +++++-
 client/src/locales/en.json                    |  3 ++
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/client/src/Pages/StatusPage/Status/index.tsx b/client/src/Pages/StatusPage/Status/index.tsx
index 9c4001fae..f2ac1a83e 100644
--- a/client/src/Pages/StatusPage/Status/index.tsx
+++ b/client/src/Pages/StatusPage/Status/index.tsx
@@ -2,6 +2,7 @@ import { BasePage, BaseFallback } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
 import { Link } from "react-router-dom";
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -111,17 +112,9 @@ const StatusPageView = () => {
 		);
 	}
 
-	const themeConfig = THEME_CONFIGS[resolveStatusPageTheme(statusPage.theme)];
-	const themedRenderer = (
-		<BaseStatusPage
-			statusPage={statusPage}
-			monitors={monitors}
-			config={themeConfig}
-		/>
-	);
-
 	// Public route: render directly on the viewport, themed background covers everything.
 	if (isPublic) {
+		const themeConfig = THEME_CONFIGS[resolveStatusPageTheme(statusPage.theme)];
 		return (
 			<StatusPageThemeProvider
 				theme={statusPage.theme}
@@ -129,7 +122,11 @@ const StatusPageView = () => {
 				timezone={statusPage.timezone}
 				paintBody
 			>
-				{themedRenderer}
+				<BaseStatusPage
+					statusPage={statusPage}
+					monitors={monitors}
+					config={themeConfig}
+				/>
 			</StatusPageThemeProvider>
 		);
 	}
@@ -153,7 +150,16 @@ const StatusPageView = () => {
 				timezone={statusPage.timezone}
 				transparent
 			>
-				<BrowserFrame url={publicUrl}>{themedRenderer}</BrowserFrame>
+				<BrowserFrame url={publicUrl}>
+					<Box
+						component="iframe"
+						src={publicUrl}
+						title={t("pages.statusPages.preview.title")}
+						flex={1}
+						width="100%"
+						border={0}
+					/>
+				</BrowserFrame>
 			</StatusPageThemeProvider>
 		</BasePage>
 	);
diff --git a/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx b/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx
index b893aa85c..183e1fdea 100644
--- a/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx
@@ -64,7 +64,13 @@ export const BrowserFrame = ({ url, children }: Props) => {
 					{url}
 				</Box>
 			</Box>
-			<Box sx={{ flex: 1, minHeight: 0 }}>{children}</Box>
+			<Box
+				display="flex"
+				flexDirection="column"
+				sx={{ flex: 1, minHeight: 0 }}
+			>
+				{children}
+			</Box>
 		</Box>
 	);
 };
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index a142156b2..b2a643f8b 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -1606,6 +1606,9 @@
 			"header": {
 				"title": "Status pages",
 				"description": "Publish public pages that show real-time uptime and incident history to your customers and stakeholders."
+			},
+			"preview": {
+				"title": "Status page preview"
 			}
 		},
 		"uptime": {