diff --git a/src/components/mdx-components/codeblock/react-live-block.tsx b/src/components/mdx-components/codeblock/react-live-block.tsx
index 52170b1338..ae0aeea98f 100644
--- a/src/components/mdx-components/codeblock/react-live-block.tsx
+++ b/src/components/mdx-components/codeblock/react-live-block.tsx
@@ -14,6 +14,8 @@ const LiveCodePreview = chakra(LivePreview, {
     p: 3,
     borderWidth: 1,
     borderRadius: '12px',
+    overflowX: 'auto',
+    whiteSpace: 'pre',
   },
 })