diff --git a/public/app/features/dashboard/dashgrid/DashboardLibrary/CompatibilityModal.tsx b/public/app/features/dashboard/dashgrid/DashboardLibrary/CompatibilityModal.tsx
index e0bd0d50701..68fba5eb028 100644
--- a/public/app/features/dashboard/dashgrid/DashboardLibrary/CompatibilityModal.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardLibrary/CompatibilityModal.tsx
@@ -128,7 +128,7 @@ export const CompatibilityModal = ({ isOpen, onDismiss, dashboardJson, datasourc
               </Text>
 
               <Text element="p">
-                <pre>{JSON.stringify(result, null, 2)}</pre>
+                <pre className={styles.jsonPreview}>{JSON.stringify(result, null, 2)}</pre>
               </Text>
             </div>
 
@@ -186,5 +186,15 @@ function getStyles(theme: GrafanaTheme2) {
       alignItems: 'center',
       justifyContent: 'center',
     }),
+    jsonPreview: css({
+      maxHeight: '400px',
+      overflow: 'auto',
+      padding: theme.spacing(2),
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.radius.default,
+      fontSize: theme.typography.bodySmall.fontSize,
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+    }),
   };
 }