fix: configuration editor rendering

docs/hydra/reference/configuration-editor.mdx

@@ -6,5 +6,5 @@ title: Configuration editor
 ```mdx-code-block
 import ConfigEditor from '@site/src/components/ConfigEditor';
 
-<ConfigEditor url="https://raw.githubusercontent.com/ory/hydra/master/spec/config.json" />
+<ConfigEditor url="https://raw.githubusercontent.com/ory/hydra/master/.schema/config.schema.json" />
 ```

src/components/ConfigEditor/index.tsx

@@ -1,4 +1,5 @@
 import RefParser from "@apidevtools/json-schema-ref-parser"
+import { ChakraProvider } from "@chakra-ui/react"
 import { Theme as ChakraUITheme } from "@rjsf/chakra-ui"
 import { withTheme } from "@rjsf/core"
 import validator from "@rjsf/validator-ajv8"
@@ -27,8 +28,10 @@ export default function ConfigEditor(props: { url: any }) {
   }
 
   return (
-    <div className="bootstrap">
-      <Form schema={schema} liveValidate={true} validator={validator} />
+    <div className="config-editor">
+      <ChakraProvider>
+        <Form schema={schema} liveValidate={true} validator={validator} />
+      </ChakraProvider>
     </div>
   )
 }

src/css/theme.css

@@ -75,3 +75,13 @@ svg[class*="iconExternalLink"] {
     margin-top: 1em;
   }
 }
+
+.config-editor .unsupported-field pre {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: pre-wrap;
+}
+
+.config-editor p {
+  margin: unset;
+}