From 17c96519f39b18820aeb52aae62caf8397be3e78 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 22 Nov 2023 10:40:27 +0100
Subject: [PATCH] :bug: [#59] Fix overflow from select being cut off in preview

---
 src/components/ComponentPreview.tsx | 8 ++++++--
 src/components/JSONPreview.tsx      | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ComponentPreview.tsx b/src/components/ComponentPreview.tsx
index a9c54ba9..bdb856c8 100644
--- a/src/components/ComponentPreview.tsx
+++ b/src/components/ComponentPreview.tsx
@@ -37,7 +37,7 @@ const ComponentPreviewWrapper: React.FC<ComponentPreviewWrapperProps> = ({
           onChange={event => setpreviewMode(event.target.value as PreviewState)}
         />
       </div>
-      <div className="card-body" style={{maxHeight: '45vh', overflow: 'auto'}}>
+      <div className="card-body">
         {previewMode === 'editJSON' ? (
           <JSONEdit
             data={component}
@@ -56,7 +56,11 @@ const ComponentPreviewWrapper: React.FC<ComponentPreviewWrapperProps> = ({
             }}
           >
             <div className="component-preview" data-testid="componentPreview">
-              {previewMode === 'rich' ? children : <JSONPreview data={component} />}
+              {previewMode === 'rich' ? (
+                children
+              ) : (
+                <JSONPreview data={component} style={{maxBlockSize: '45vh'}} />
+              )}
             </div>
           </Formik>
         )}
diff --git a/src/components/JSONPreview.tsx b/src/components/JSONPreview.tsx
index c919612b..20aa3614 100644
--- a/src/components/JSONPreview.tsx
+++ b/src/components/JSONPreview.tsx
@@ -3,8 +3,12 @@ interface JSONPreviewProps {
   className?: string;
 }
 
-const JSONPreview: React.FC<JSONPreviewProps> = ({data, className = ''}) => (
-  <pre className={className} data-testid="jsonPreview">
+const JSONPreview: React.FC<JSONPreviewProps & JSX.IntrinsicElements['pre']> = ({
+  data,
+  className = '',
+  ...props
+}) => (
+  <pre className={className} data-testid="jsonPreview" {...props}>
     {JSON.stringify(data, null, 2)}
   </pre>
 );