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

@@ -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",
 		},

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")}

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" }}

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.",

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": [
 											{

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(),