fix(schema-validation): document preview overflow styles COMPASS-8997 (…

…#6739)

packages/compass-schema-validation/src/components/compass-schema-validation.tsx

@@ -1,23 +1,14 @@
 import React from 'react';
 import ValidationStates from './validation-states';
-import { css, WorkspaceContainer } from '@mongodb-js/compass-components';
-
-const styles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 1,
-  height: '100%',
-});
+import { WorkspaceContainer } from '@mongodb-js/compass-components';
 
 /**
  * The core schema validation component.
  */
 export function CompassSchemaValidation() {
   return (
-    <div className={styles} data-testid="compass-schema-validation">
-      <WorkspaceContainer>
-        <ValidationStates />
-      </WorkspaceContainer>
-    </div>
+    <WorkspaceContainer data-testid="compass-schema-validation">
+      <ValidationStates />
+    </WorkspaceContainer>
   );
 }

packages/compass-schema-validation/src/components/sample-documents.tsx

@@ -20,29 +20,29 @@ const SAMPLE_DEFINITION = `A sample is fetched from a sample-space of ${SAMPLE_S
 
 /**
  * The Sample Documents editor component.
- */
-
+ **/
 const sampleDocumentsSectionStyles = css({
-  marginTop: spacing[4],
+  marginTop: spacing[600],
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const sampleDocumentsStyles = css({
   display: 'flex',
-  gap: spacing[3],
+  gap: spacing[400],
 });
 
 const sampleDocumentStyles = css({
-  flex: 1,
+  overflow: 'auto',
+  flex: '50%',
 });
 
 const documentHeadingStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[1],
-  marginBottom: spacing[3],
+  gap: spacing[100],
+  marginBottom: spacing[400],
 });
 
 const matchingStylesLight = css({