fix(compass-components): improve Error details modal UX (COMPASS-10474)

packages/compass-components/src/hooks/use-error-details.tsx

@@ -1,7 +1,15 @@
 import { showConfirmation } from './use-confirmation';
 import { Code, ConfirmationModalVariant } from '../components/leafygreen';
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
 import React from 'react';
 
+const errorDetailsContentStyles = css({
+  paddingTop: spacing[400], // small gap above JSON
+  maxHeight: '60vh', // cap JSON area height so footer can stay visible
+  overflow: 'auto', // scroll JSON when long
+});
+
 export const showErrorDetails = function showErrorDetails({
   details,
   closeAction,
@@ -12,13 +20,15 @@ export const showErrorDetails = function showErrorDetails({
   void showConfirmation({
     title: 'Error details',
     description: (
-      <Code
-        language="json"
-        data-testid="error-details-json"
-        id="error-details-json"
-      >
-        {JSON.stringify(details, undefined, 2)}
-      </Code>
+      <div className={errorDetailsContentStyles}>
+        <Code
+          language="json"
+          data-testid="error-details-json"
+          id="error-details-json"
+        >
+          {JSON.stringify(details, undefined, 2)}
+        </Code>
+      </div>
     ),
     hideCancelButton: true,
     buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),