fix(custom-widgets): sync formatted skill schema

Preserve release/v2's concise public documentation while compacting the expanded skill trigger and routing text so the serialized lazy resource remains below 12,000 bytes.

apps/docs/docs/advanced/styling/index.mdx

@@ -85,11 +85,8 @@ To do this, enter the board settings:
 
 ![](./img/enter-board-settings.png)
 
-Administrators can add instance-wide CSS under **Management → Settings → Branding → Custom CSS**. Enter CSS directly
+Scroll to the **Custom CSS** section on the board settings page. It is part of the unified settings form; enter your CSS
-or import a community theme from the Workshop, then save the server settings to apply it to every page.
+there and save the board settings to apply it to that board.
-
-For board-specific styling, scroll to the **Custom CSS** section on the board settings page. Enter your CSS there and
-save the board settings to apply it to that board. Board CSS is loaded after the global stylesheet and can override it.
 
 ![](./img/custom-css-setting.png)
 

apps/docs/docs/management/settings/index.mdx

@@ -142,10 +142,6 @@ Branding settings let administrators adapt Homarr to the identity and visual sty
 
 Choose the primary and secondary colors used by the theme. **Lock primary color** prevents users from overriding the configured primary color. **Default corner style** controls the global radius used by cards, controls, and other interface elements.
 
-### Global custom CSS
-
-The branding settings include a CSS editor for styles that should apply across the entire instance. You can write CSS directly or import a community theme from the Workshop. CSS configured on an individual board takes precedence over the global stylesheet.
-
 ### Sign-in page
 
 You can set a greeting and a background image for authentication pages. The overlay slider adjusts the contrast between the background and the sign-in content. The visibility controls independently show or hide the application name, logo, and greeting.

apps/docs/src/components/workshop/WorkshopApp.tsx

@@ -359,7 +359,7 @@ const SubmissionCard = ({ submission, backend, userVote, onVote }: SubmissionCar
       <CardHeader className="flex flex-col gap-2 sm:grid">
         <div className="flex items-center gap-2">
           <a href={`/workshop/${submission.id}/`} className="min-w-0 hover:underline" title={submission.title}>
-            <CardTitle className="line-clamp-2">{submission.title}</CardTitle>
+            <CardTitle className="truncate">{submission.title}</CardTitle>
           </a>
           {!hasScreenshots && (
             <Badge variant="secondary" className="shrink-0 gap-1.5 px-2">

apps/nextjs/package.json

@@ -106,10 +106,12 @@
     "next": "catalog:",
     "postcss-preset-mantine": "catalog:",
     "posthog-js": "catalog:",
+    "prismjs": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-error-boundary": "catalog:",
     "react-shiki": "catalog:",
+    "react-simple-code-editor": "catalog:",
     "remark-breaks": "catalog:",
     "remark-directive": "catalog:",
     "remark-gfm": "catalog:",
@@ -126,6 +128,7 @@
     "@types/better-sqlite3": "catalog:",
     "@types/chroma-js": "catalog:",
     "@types/node": "catalog:",
+    "@types/prismjs": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "concurrently": "catalog:",

apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx

@@ -1,16 +1,21 @@
 "use client";
 
-import { Alert } from "@mantine/core";
+import { Alert, Input } from "@mantine/core";
+import { highlight, languages } from "prismjs";
+import Editor from "react-simple-code-editor";
+
+import "~/styles/prismjs.scss";
+
 import { IconInfoCircle } from "@tabler/icons-react";
 
 import { useSession } from "@homarr/auth/client";
 import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 
-import { CustomCssEditor } from "~/components/custom-css/custom-css-editor";
 import { SectionCard } from "~/components/manage/section-card";
 import { WorkshopCssImportButton } from "~/components/workshop/workshop-css-import-button";
 import type { FormValues } from "./_settings-form";
+import classes from "./customcss.module.css";
 
 interface Props {
   form: UseFormReturnType<FormValues>;
@@ -24,12 +29,7 @@ export const CustomCssSettingsContent = ({ form }: Props) => {
 
   return (
     <SectionCard title={t("setting.section.customCss.title")}>
-      <CustomCssEditor
+      <CustomCssInput {...form.getInputProps("customCss")} />
-        id="board-custom-css"
-        label={customCssT("label")}
-        description={customCssT("description")}
-        {...form.getInputProps("customCss")}
-      />
 
       <Alert variant="light" color="cyan" title={customCssT("customClassesAlert.title")} icon={<IconInfoCircle />}>
         {customCssT("customClassesAlert.description")}
@@ -38,3 +38,40 @@ export const CustomCssSettingsContent = ({ form }: Props) => {
     </SectionCard>
   );
 };
+
+interface CustomCssInputProps {
+  value?: string;
+  onChange: (value: string) => void;
+  error?: React.ReactNode;
+}
+
+const CustomCssInput = ({ value, onChange, error }: CustomCssInputProps) => {
+  const customCssT = useI18n("board.field.customCss");
+
+  return (
+    <Input.Wrapper
+      label={customCssT("label")}
+      labelProps={{
+        htmlFor: "custom-css",
+      }}
+      description={customCssT("description")}
+      error={error}
+      inputWrapperOrder={["label", "description", "input", "error"]}
+    >
+      <div className={classes.codeEditorRoot}>
+        <Editor
+          textareaId="custom-css"
+          onValueChange={onChange}
+          value={value ?? ""}
+          highlight={(code) => highlight(code, languages.extend("css", {}), "css")}
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 12,
+            minHeight: 250,
+          }}
+        />
+      </div>
+    </Input.Wrapper>
+  );
+};

apps/nextjs/src/app/[locale]/boards/[name]/settings/customcss.module.css

@@ -0,0 +1,22 @@
+.codeEditorFooter {
+  border-bottom-left-radius: var(--mantine-radius-sm);
+  border-bottom-right-radius: var(--mantine-radius-sm);
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
+}
+
+.codeEditorRoot {
+  margin-top: 4px;
+  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--mantine-radius-sm);
+}
+
+.codeEditor {
+  background-color: light-dark(white, var(--mantine-color-dark-6));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.codeEditor ::placeholder {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}

apps/nextjs/src/app/[locale]/layout.tsx

@@ -199,7 +199,6 @@ export default async function Layout(props: {
         ) : null}
         <SearchEngineOptimization />
         <CrowdinLiveTranslation locale={locale} />
-        <style data-homarr-global-custom-css>{serverSettings.branding.customCss}</style>
       </head>
       <body className={[fontSans.className, fontSans.variable].join(" ")} suppressHydrationWarning>
         <Analytics enabled={serverSettings.analytics.enableGeneral} />

apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.tsx

@@ -1 +1,50 @@
-export { CodeEditor } from "~/components/custom-widgets/code-editor";
+"use client";
+
+import { useMemo } from "react";
+import type { ComponentProps } from "react";
+
+import { CustomWidgetCodeEditor } from "@homarr/custom-widgets/workbench";
+import { invariantTechnicalLabels } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+
+type SharedEditorProps = ComponentProps<typeof CustomWidgetCodeEditor>;
+type CodeEditorProps = Omit<SharedEditorProps, "messages">;
+
+export function CodeEditor(props: CodeEditorProps) {
+  const t = useI18n("customWidget.editor");
+  const tCommon = useI18n("common");
+  const messages = useMemo<SharedEditorProps["messages"]>(
+    () => ({
+      languageJsx: invariantTechnicalLabels.jsx,
+      languageJson: invariantTechnicalLabels.json,
+      undo: tCommon("action.undo"),
+      redo: t("action.redo"),
+      components: t("action.components"),
+      componentSearch: t("componentReference.search"),
+      componentEmpty: t("componentReference.empty"),
+      componentCount: (count) => t("componentReference.count", { count }),
+      insertStarter: t("action.insertStarter"),
+      format: t("action.format"),
+      copy: tCommon("action.copy"),
+      copied: t("action.copied"),
+      schema: t("action.schema"),
+      schemaTab: invariantTechnicalLabels.jsonSchema,
+      minimalTab: t("reference.minimal"),
+      fullTab: t("reference.full"),
+      errors: (count) => t("status.errors", { count }),
+      warnings: (count) => t("status.warnings", { count }),
+      ready: t("status.ready"),
+      position: (cursor) => t("status.position", cursor),
+      characters: (count, limit) =>
+        limit ? t("status.charactersWithLimit", { count, limit }) : t("status.characters", { count }),
+      diagnosticsTitle: t("diagnostics.title"),
+      diagnostic: (diagnostic) =>
+        `${diagnostic.line ? `${t("diagnostics.line", { line: diagnostic.line })}: ` : ""}${t(
+          `diagnostics.${diagnostic.code}` as never,
+          { value: diagnostic.value ?? "" } as never,
+        )}`,
+    }),
+    [t, tCommon],
+  );
+  return <CustomWidgetCodeEditor {...props} messages={messages} />;
+}

apps/nextjs/src/app/[locale]/manage/settings/_components/branding-settings-form.tsx

@@ -20,9 +20,7 @@ import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 import { BoardColorInput, CornerStylePicker, cornerStyleValues } from "@homarr/ui";
 
-import { CustomCssEditor } from "~/components/custom-css/custom-css-editor";
 import { SectionCard } from "~/components/manage/section-card";
-import { WorkshopCssImportButton } from "~/components/workshop/workshop-css-import-button";
 import type { FormValues } from "./settings-form";
 
 interface BrandingSettingsFormProps {
@@ -103,21 +101,6 @@ export const BrandingSettingsForm = ({ form }: BrandingSettingsFormProps) => {
           </SimpleGrid>
         </Fieldset>
 
-        <Fieldset legend={t("groups.customCss")} p="sm">
-          <CustomCssEditor
-            id="global-custom-css"
-            label={t("customCss.label")}
-            description={t("customCss.description")}
-            actions={
-              <WorkshopCssImportButton
-                size="compact-xs"
-                onImport={(css) => form.setFieldValue("branding.customCss", css)}
-              />
-            }
-            {...form.getInputProps("branding.customCss")}
-          />
-        </Fieldset>
-
         <Fieldset legend={t("groups.authentication")} p="sm">
           <Stack gap="sm">
             <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm" verticalSpacing="sm">

apps/nextjs/src/app/[locale]/manage/settings/_components/settings-form.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
 import { Button, Stack } from "@mantine/core";
 import { z } from "zod/v4";
 
@@ -71,7 +70,6 @@ interface SettingsFormProps {
 export const SettingsForm = ({ initialData, selectableBoards, selectableSearchEngines }: SettingsFormProps) => {
   const tCommon = useI18n("common");
   const tSettings = useI18n("management.page.settings");
-  const router = useRouter();
 
   const initialValues = buildInitialValues(initialData);
   const initialValuesRef = useRef(initialValues);
@@ -166,7 +164,6 @@ export const SettingsForm = ({ initialData, selectableBoards, selectableSearchEn
       form.setInitialValues(values);
       form.resetDirty();
       await revalidatePathActionAsync("/manage/settings");
-      router.refresh();
       showSuccessNotification({
         title: tCommon("notification.update.success"),
         message: tSettings("notification.success.message"),

apps/nextjs/src/components/board/sections/container-section.tsx

@@ -8,7 +8,6 @@ import { useEditMode } from "@homarr/boards/edit-mode";
 import { useI18n } from "@homarr/translation/client";
 
 import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
-import { COLLAPSED_SECTION_ROW_COUNT } from "~/components/board/layout";
 import { SectionGrid } from "./grid/section-grid";
 import { useSectionCollapse } from "./section-collapse";
 import { useOpenSectionApps } from "./use-open-section-apps";
@@ -150,13 +149,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           aria-hidden={isVisuallyCollapsed}
           inert={isVisuallyCollapsed}
         >
-          <SectionGrid
+          <SectionGrid section={section} columnCount={section.width} requestedRowCount={section.height} label={label} />
-            section={section}
-            columnCount={section.width}
-            requestedRowCount={section.height}
-            viewportRowCountOverride={isVisuallyCollapsed ? COLLAPSED_SECTION_ROW_COUNT : undefined}
-            label={label}
-          />
         </Box>
       </Card>
       {isEditMode && <BoardContainerMenu section={section} />}

apps/nextjs/src/components/board/sections/grid/section-grid.tsx

@@ -33,7 +33,6 @@ interface SectionGridProps {
   section: Exclude<Section, { kind: "container" }> | ContainerSectionItem;
   columnCount: number;
   requestedRowCount?: number;
-  viewportRowCountOverride?: number;
   label: string;
   railPlacement?: "main" | "left" | "right";
   className?: string;
@@ -43,7 +42,6 @@ export const SectionGrid = ({
   section,
   columnCount,
   requestedRowCount = 0,
-  viewportRowCountOverride,
   label,
   railPlacement = "main",
   className,
@@ -69,8 +67,6 @@ export const SectionGrid = ({
     () =>
       [...items, ...innerSections].map((item): SectionGridPlacement => {
         const minimum = item.type === "section" ? minimumBySectionId.get(item.id) : undefined;
-        const isNonScrollableContainer = item.type === "section" && !item.options.scrollable;
-        const height = isNonScrollableContainer && minimum ? Math.max(item.height, minimum.height) : item.height;
         return normalizeGridPlacement(
           {
             id: item.id,
@@ -78,7 +74,7 @@ export const SectionGrid = ({
             x: item.xOffset,
             y: item.yOffset,
             w: item.width,
-            h: height,
+            h: item.height,
             minW: minimum?.width,
             minH: minimum?.height,
           },
@@ -141,8 +137,7 @@ export const SectionGrid = ({
   // A scrollable container isn't forced to grow with its content - it scrolls internally instead
   // of expanding to fit every widget, so its viewport height is capped independently of rowCount.
   const isScrollableContainer = section.kind === "container" && section.options.scrollable;
-  const viewportRowCount =
+  const viewportRowCount = isScrollableContainer ? Math.max(requestedRowCount, 1) : rowCount;
-    viewportRowCountOverride ?? (isScrollableContainer ? Math.max(requestedRowCount, 1) : rowCount);
   // A container's own visible card is inset from its allocated board cell by the board's
   // standard per-item gap (see the base, non-container `.staticItem[data-type="item"] >
   // .contentMount` rule in section-grid.module.css - a container is placed as an "item" like
@@ -164,9 +159,14 @@ export const SectionGrid = ({
   // all, the header bar covers the first row of the container's content instead of sitting
   // above it. Only the vertical axis is affected - the toggle spans the full width already.
   const collapsibleHeaderInset =
-    section.kind === "container" && section.options.collapsible ? CONTAINER_HEADER_HEIGHT / effectiveCanvasScale : 0;
+    section.kind === "container" && section.options.collapsible
+      ? CONTAINER_HEADER_HEIGHT / effectiveCanvasScale
+      : 0;
   const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
-  const viewportHeight = Math.max(1, getLogicalGridSize(viewportRowCount) - outerCardInset - collapsibleHeaderInset);
+  const viewportHeight = Math.max(
+    1,
+    getLogicalGridSize(viewportRowCount) - outerCardInset - collapsibleHeaderInset,
+  );
   // Items are positioned in a coordinate space sized to the *un-inset* column/row count
   // (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
   // deliberately smaller by outerCardInset to match the container's actual visible card size.

apps/nextjs/src/components/custom-css/custom-css-editor.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { CodeEditor } from "~/components/custom-widgets/code-editor";
-
-interface CustomCssEditorProps {
-  id: string;
-  label: string;
-  description: string;
-  value?: string;
-  onChange: (value: string) => void;
-  error?: React.ReactNode;
-  actions?: React.ReactNode;
-}
-
-export const CustomCssEditor = ({
-  id,
-  label,
-  description,
-  value = "",
-  onChange,
-  error,
-  actions,
-}: CustomCssEditorProps) => {
-  return (
-    <CodeEditor
-      id={id}
-      label={label}
-      description={description}
-      value={value}
-      onChange={onChange}
-      error={error}
-      language="css"
-      height="250px"
-      maxLength={16_384}
-      actions={actions}
-    />
-  );
-};

apps/nextjs/src/components/custom-widgets/code-editor.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import type { ComponentProps } from "react";
-
-import { CustomWidgetCodeEditor } from "@homarr/custom-widgets/workbench";
-import { invariantTechnicalLabels } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
-
-type SharedEditorProps = ComponentProps<typeof CustomWidgetCodeEditor>;
-type CodeEditorProps = Omit<SharedEditorProps, "messages">;
-
-export function CodeEditor(props: CodeEditorProps) {
-  const t = useI18n("customWidget.editor");
-  const tCommon = useI18n("common");
-  const messages = useMemo<SharedEditorProps["messages"]>(
-    () => ({
-      languageJsx: invariantTechnicalLabels.jsx,
-      languageJson: invariantTechnicalLabels.json,
-      undo: tCommon("action.undo"),
-      redo: t("action.redo"),
-      components: t("action.components"),
-      componentSearch: t("componentReference.search"),
-      componentEmpty: t("componentReference.empty"),
-      componentCount: (count) => t("componentReference.count", { count }),
-      insertStarter: t("action.insertStarter"),
-      format: t("action.format"),
-      copy: tCommon("action.copy"),
-      copied: t("action.copied"),
-      schema: t("action.schema"),
-      schemaTab: invariantTechnicalLabels.jsonSchema,
-      minimalTab: t("reference.minimal"),
-      fullTab: t("reference.full"),
-      errors: (count) => t("status.errors", { count }),
-      warnings: (count) => t("status.warnings", { count }),
-      ready: t("status.ready"),
-      position: (cursor) => t("status.position", cursor),
-      characters: (count, limit) =>
-        limit ? t("status.charactersWithLimit", { count, limit }) : t("status.characters", { count }),
-      diagnosticsTitle: t("diagnostics.title"),
-      diagnostic: (diagnostic) =>
-        `${diagnostic.line ? `${t("diagnostics.line", { line: diagnostic.line })}: ` : ""}${t(
-          `diagnostics.${diagnostic.code}` as never,
-          { value: diagnostic.value ?? "" } as never,
-        )}`,
-    }),
-    [t, tCommon],
-  );
-  return <CustomWidgetCodeEditor {...props} messages={messages} />;
-}

apps/nextjs/src/components/workshop/workshop-css-import-button.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import type { ButtonProps } from "@mantine/core";
 import { ActionIcon, Button, Group, Loader, Modal, Pagination, Stack, Text, TextInput, Tooltip } from "@mantine/core";
 import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
 import { IconDownload, IconExternalLink, IconSearch } from "@tabler/icons-react";
@@ -22,27 +21,15 @@ import { WorkshopVoteControl } from "./workshop-vote-control";
 /**
  * Picks a community CSS theme in a single surface: browse, confirm, done.
  * The imported rules land in the editor below and are only persisted when the
- * settings themselves are saved, so there is nothing to preview twice.
+ * board settings themselves are saved, so there is nothing to preview twice.
  */
-export function WorkshopCssImportButton({
+export function WorkshopCssImportButton({ onImport }: { onImport(css: string): void }) {
-  onImport,
-  size,
-}: {
-  onImport(css: string): void;
-  size?: ButtonProps["size"];
-}) {
   const t = useI18n("workshop");
   const [opened, controls] = useDisclosure(false);
 
   return (
     <>
-      <Button
+      <Button type="button" variant="light" leftSection={<IconDownload size={16} />} onClick={controls.open}>
-        type="button"
-        size={size}
-        variant="light"
-        leftSection={<IconDownload size={16} />}
-        onClick={controls.open}
-      >
         {t("importCss")}
       </Button>
       <Modal opened={opened} onClose={controls.close} title={t("importCss")} size={modalSizeSelect} radius="md">

apps/nextjs/src/styles/prismjs.scss

@@ -0,0 +1,225 @@
+[data-mantine-color-scheme="light"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #000;
+    background: 0 0;
+    text-shadow: 0 1px #fff;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  code[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection,
+  pre[class*="language-"] ::-moz-selection,
+  pre[class*="language-"]::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  code[class*="language-"] ::selection,
+  code[class*="language-"]::selection,
+  pre[class*="language-"] ::selection,
+  pre[class*="language-"]::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: #f5f2f0;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #708090;
+  }
+  .token.punctuation {
+    color: #999;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.deleted,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #905;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #690;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url {
+    color: #9a6e3a;
+    background: hsla(0, 0%, 100%, 0.5);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #07a;
+  }
+  .token.class-name,
+  .token.function {
+    color: #dd4a68;
+  }
+  .token.important,
+  .token.regex,
+  .token.variable {
+    color: #e90;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+}
+
+[data-mantine-color-scheme="dark"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #fff;
+    background: 0 0;
+    text-shadow: 0 -0.1em 0.2em #000;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: #4c3f33;
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0.3em solid #7a6651;
+    border-radius: 0.5em;
+    box-shadow: 1px 1px 0.5em #000 inset;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.15em 0.2em 0.05em;
+    border-radius: 0.3em;
+    border: 0.13em solid #7a6651;
+    box-shadow: 1px 1px 0.3em -0.1em #000 inset;
+    white-space: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #997f66;
+  }
+  .token.punctuation {
+    opacity: 0.7;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #d1939e;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #bce051;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url,
+  .token.variable {
+    color: #f4b73d;
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #d1939e;
+  }
+  .token.important,
+  .token.regex {
+    color: #e90;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  .token.deleted {
+    color: red;
+  }
+}

packages/custom-widgets/src/workbench/code-editor-toolbar.tsx

@@ -54,7 +54,6 @@ export function CodeEditorToolbar({
         </Text>
       </Group>
       <Group gap={6}>
-        {props.actions}
         {!props.readOnly && (
           <>
             <Button

packages/custom-widgets/src/workbench/code-editor-types.ts

@@ -57,5 +57,4 @@ export interface CustomWidgetCodeEditorProps {
   readOnly?: boolean;
   reference?: CustomWidgetSchemaReferenceData;
   height?: string;
-  actions?: ReactNode;
 }

packages/server-settings/src/index.ts

@@ -51,7 +51,6 @@ export const brandingServerSettingsSchema = z.object({
   signInBackgroundOverlay: z.number().min(0).max(0.9),
   authBranding: authBrandingSchema,
   defaultRadius: z.enum(brandingRadiusOptions),
-  customCss: z.string().max(16_384),
 });
 
 export type BrandingSettings = z.infer<typeof brandingServerSettingsSchema>;
@@ -72,7 +71,6 @@ export const defaultBrandingSettings: BrandingSettings = {
     showGreeting: true,
   },
   defaultRadius: "md",
-  customCss: "",
 };
 
 const hasDefaultBrandingColors = (branding: Pick<BrandingSettings, "primaryColor" | "secondaryColor">) =>

packages/translation/src/lang/en.json

@@ -5972,7 +5972,6 @@
             "groups": {
               "identity": "Identity",
               "appearance": "Appearance",
-              "customCss": "Custom CSS",
               "authentication": "Authentication"
             },
             "identity": {
@@ -6019,10 +6018,6 @@
                 "xl": "Soft"
               }
             },
-            "customCss": {
-              "label": "Global custom CSS",
-              "description": "Applied to every page. Board custom CSS can override it."
-            },
             "authVisibility": {
               "description": "Choose what appears on every authentication page.",
               "appName": "Application name",

pnpm-lock.yaml

@@ -1238,6 +1238,9 @@ importers:
       posthog-js:
         specifier: 'catalog:'
         version: 1.399.2(preact-render-to-string@6.5.11)
+      prismjs:
+        specifier: 'catalog:'
+        version: 1.30.0
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -1250,6 +1253,9 @@ importers:
       react-shiki:
         specifier: 'catalog:'
         version: 0.11.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)
+      react-simple-code-editor:
+        specifier: 'catalog:'
+        version: 0.14.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       remark-breaks:
         specifier: 'catalog:'
         version: 4.0.0
@@ -1293,6 +1299,9 @@ importers:
       '@types/node':
         specifier: 'catalog:'
         version: 24.13.3
+      '@types/prismjs':
+        specifier: 'catalog:'
+        version: 1.26.6
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.17