From e6e13158f60d71e8b566286e26769a8bb2bfaf82 Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@hamil.town>
Date: Wed, 10 Aug 2022 15:05:28 +1000
Subject: [PATCH] Fix long lines in code blocks in the document editor
 overflowing the editor (#7783)

---
 .changeset/fast-bears-attack.md                              | 5 +++++
 .../fields-document/src/DocumentEditor/render-element.tsx    | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/fast-bears-attack.md

diff --git a/.changeset/fast-bears-attack.md b/.changeset/fast-bears-attack.md
new file mode 100644
index 00000000000..a14995068fc
--- /dev/null
+++ b/.changeset/fast-bears-attack.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/fields-document': patch
+---
+
+Fixes long lines in code blocks in the document editor overflowing the editor
diff --git a/packages/fields-document/src/DocumentEditor/render-element.tsx b/packages/fields-document/src/DocumentEditor/render-element.tsx
index 563c1b7b096..eb47571e52e 100644
--- a/packages/fields-document/src/DocumentEditor/render-element.tsx
+++ b/packages/fields-document/src/DocumentEditor/render-element.tsx
@@ -99,6 +99,7 @@ const CodeElement = ({ attributes, children }: RenderElementProps) => {
         fontFamily: typography.fontFamily.monospace,
         fontSize: typography.fontSize.small,
         padding: `${spacing.small}px ${spacing.medium}px`,
+        overflowX: 'auto',
       }}
       {...attributes}
     >