🐛 [#59] Fix overflow from select being cut off in preview

open-formulieren · Nov 22, 2023 · 17c9651 · 17c9651
1 parent c92f723
commit 17c9651
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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>
 );