Wrap text in syntaxhighlighter to avoid overflow (#345)

Fixes #344
TBD54566975 · Aug 31, 2023 · 7a66de4 · 7a66de4
1 parent cf6f9d5
commit 7a66de4
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/console/client/src/components/CodeBlock.tsx b/console/client/src/components/CodeBlock.tsx
@@ -21,13 +21,20 @@ export const CodeBlock: React.FC<Props> = ({
 
   return (
     <SyntaxHighlighter
+      wrapLongLines={true}
+      lineProps={{style: {flexWrap: 'wrap'}}}
       language={language}
       style={
         isDarkMode
           ? (atomDark as React.CSSProperties)
           : (oneLight as React.CSSProperties)
       }
-      customStyle={{fontSize: '12px', maxHeight: `${maxHeight}px`}}
+      customStyle={{
+        fontSize: '12px',
+        maxHeight: `${maxHeight}px`,
+        overflow: 'auto',
+        maxWidth: `100%`,
+      }}
     >
       {code}
     </SyntaxHighlighter>