From 73f95ac8e1a87d7fc58553814c757bdbad6d7484 Mon Sep 17 00:00:00 2001
From: Buco7854 <github@grimbert.net>
Date: Wed, 10 Jun 2026 09:47:19 +0000
Subject: [PATCH] feat: complete custom CSS support for status pages

The customCSS field existed on the model, types, and form schema but was
never editable, sent to the API, or rendered. Wire it end to end:

- Accept customCSS in the create/update status page body validation and
  regenerate the OpenAPI spec
- Add a Custom CSS editor (multiline field) to the status page form and
  include the value in the submitted form data
- Support multiline mode in the shared TextInput component
- Inject the saved CSS via a style tag when rendering the status page
---
 client/src/Components/inputs/TextInput.tsx    |  2 +-
 client/src/Pages/StatusPage/Create/index.tsx  | 28 +++++++++++++++++++
 .../Status/themes/shared/BaseStatusPage.tsx   |  1 +
 client/src/locales/en.json                    | 10 +++++++
 server/openapi.json                           |  6 ++++
 .../api/validation/statusPageValidation.ts    |  1 +
 6 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx
index 13277be72..230e7650b 100644
--- a/client/src/Components/inputs/TextInput.tsx
+++ b/client/src/Components/inputs/TextInput.tsx
@@ -22,7 +22,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 		width: "100%",
 		"& .MuiOutlinedInput-root": {
 			borderRadius: theme.shape.borderRadius,
-			height: 34,
+			height: props.multiline ? "auto" : 34,
 			fontSize: typographyLevels.base,
 			overflow: "hidden",
 		},
diff --git a/client/src/Pages/StatusPage/Create/index.tsx b/client/src/Pages/StatusPage/Create/index.tsx
index c9bc04838..921ca8bdb 100644
--- a/client/src/Pages/StatusPage/Create/index.tsx
+++ b/client/src/Pages/StatusPage/Create/index.tsx
@@ -157,6 +157,7 @@ const CreateStatusPage = () => {
 		fd.append("showUptimePercentage", String(data.showUptimePercentage));
 		fd.append("showAdminLoginLink", String(data.showAdminLoginLink));
 		fd.append("showInfrastructure", String(data.showInfrastructure));
+		fd.append("customCSS", data.customCSS ?? "");
 		if (data.theme) fd.append("theme", data.theme);
 		if (data.themeMode) fd.append("themeMode", data.themeMode);
 
@@ -504,6 +505,33 @@ const CreateStatusPage = () => {
 					}
 				/>
 			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.customCSS.title")}
+					subtitle={t("pages.statusPages.form.customCSS.description")}
+					rightContent={
+						<Controller
+							name="customCSS"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									multiline
+									rows={8}
+									fieldLabel={t(
+										"pages.statusPages.form.customCSS.option.customCSS.label"
+									)}
+									placeholder={t(
+										"pages.statusPages.form.customCSS.option.customCSS.placeholder"
+									)}
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
 			{showStep(1) && (
 				<ConfigBox
 					title={t("pages.statusPages.form.features.title")}
diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
index a6214567d..1dfc0bd1b 100644
--- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
@@ -102,6 +102,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 
 	return (
 		<Box sx={styles.page}>
+			{statusPage.customCSS && <style>{statusPage.customCSS}</style>}
 			<Stack
 				component="header"
 				direction={{ xs: "column", md: "row" }}
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index e5f7073b6..a142156b2 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -1574,6 +1574,16 @@
 					"light": "Light only",
 					"dark": "Dark only"
 				},
+				"customCSS": {
+					"title": "Custom CSS",
+					"description": "Add custom CSS to fine-tune the look of your public status page.",
+					"option": {
+						"customCSS": {
+							"label": "Custom CSS",
+							"placeholder": "footer { display: none; }"
+						}
+					}
+				},
 				"features": {
 					"title": "Features",
 					"description": "Configure what information is displayed on your status page.",
diff --git a/server/openapi.json b/server/openapi.json
index 77580866d..838c94863 100644
--- a/server/openapi.json
+++ b/server/openapi.json
@@ -10487,6 +10487,9 @@
 									"showInfrastructure": {
 										"type": "boolean"
 									},
+									"customCSS": {
+										"type": "string"
+									},
 									"removeLogo": {
 										"anyOf": [
 											{
@@ -10690,6 +10693,9 @@
 									"showInfrastructure": {
 										"type": "boolean"
 									},
+									"customCSS": {
+										"type": "string"
+									},
 									"removeLogo": {
 										"anyOf": [
 											{
diff --git a/server/src/api/validation/statusPageValidation.ts b/server/src/api/validation/statusPageValidation.ts
index 58595e24f..3634d831f 100644
--- a/server/src/api/validation/statusPageValidation.ts
+++ b/server/src/api/validation/statusPageValidation.ts
@@ -32,6 +32,7 @@ export const createStatusPageBodyValidation = z
 		showUptimePercentage: booleanCoercion,
 		showAdminLoginLink: booleanCoercion.optional(),
 		showInfrastructure: booleanCoercion.optional(),
+		customCSS: z.string().optional(),
 		removeLogo: z.union([z.literal("true"), z.literal("false")]).optional(),
 		theme: z.enum(StatusPageThemes).optional(),
 		themeMode: z.enum(StatusPageThemeModes).optional(),