From fda20e69a658d36f5783b8dfa659b004a311432c Mon Sep 17 00:00:00 2001
From: Benjie Gillam <benjie@jemjie.com>
Date: Thu, 19 Dec 2024 09:25:22 +0000
Subject: [PATCH] Wrap code blocks

See: https://github.com/facebook/docusaurus/issues/7875#issuecomment-2553171861
---
 utils/website/graphile-config/preset.md | 10 +++++++++-
 utils/website/src/css/custom.css        |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/utils/website/graphile-config/preset.md b/utils/website/graphile-config/preset.md
index 6cc166791d..f51cb59e2d 100644
--- a/utils/website/graphile-config/preset.md
+++ b/utils/website/graphile-config/preset.md
@@ -61,6 +61,8 @@ You can specify a `graphile.config.ts` file, but if that uses `export default`,
 and your TypeScript is configured to export ESM, then you may get an error
 telling you that you cannot `require` an ES Module:
 
+<div className="wrapcode">
+
 ```
 Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/graphile.config.ts
 require() of ES modules is not supported.
@@ -68,12 +70,18 @@ require() of /path/to/graphile.config.ts from /path/to/node_modules/graphile-con
 Instead change the requiring code to use import(), or remove "type": "module" from /path/to/package.json.
 ```
 
+</div>
+
 Or, in newer versions, an error saying unknown file extension:
 
-```js
+<div className="wrapcode">
+
+```
 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /path/to/graphile.config.ts
 ```
 
+</div>
+
 To solve this, use the experimental loaders API to add support for TS ESM via
 the `ts-node/esm` loader:
 
diff --git a/utils/website/src/css/custom.css b/utils/website/src/css/custom.css
index bcfc6ca17f..4d4923c6f9 100644
--- a/utils/website/src/css/custom.css
+++ b/utils/website/src/css/custom.css
@@ -31,3 +31,7 @@
   --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.wrapcode code {
+  white-space: pre-wrap;
+}