[ML] Data Frame Analytics: Migrate scatterplot matrix from SCSS to em…

…otion (elastic#199180)

## Summary

Part of elastic#140695

Migrates SCSS to emotion for the DFA scatterplot matrix.

![CleanShot 2024-11-06 at 17 27
35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579)

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx

@@ -7,6 +7,7 @@
 
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { css } from '@emotion/react';
 
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
@@ -35,6 +36,7 @@ import {
   type RuntimeMappings,
 } from '@kbn/ml-runtime-field-utils';
 import { getProcessedFields } from '@kbn/ml-data-grid';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { useCurrentThemeVars, useMlApi, useMlKibana } from '../../contexts/kibana';
 
@@ -48,7 +50,17 @@ import {
   OUTLIER_SCORE_FIELD,
 } from './scatterplot_matrix_vega_lite_spec';
 
-import './scatterplot_matrix.scss';
+const cssOverrides = css({
+  // Prevent the chart from overflowing the container
+  overflowX: 'auto',
+  // Overrides for the outlier threshold slider
+  '.vega-bind': {
+    span: {
+      fontSize: euiThemeVars.euiFontSizeXS,
+      padding: `0 ${euiThemeVars.euiSizeXS}`,
+    },
+  },
+});
 
 const SCATTERPLOT_MATRIX_DEFAULT_FIELDS = 4;
 const SCATTERPLOT_MATRIX_DEFAULT_FETCH_SIZE = 1000;
@@ -413,7 +425,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
       ) : (
         <div
           data-test-subj={`mlScatterplotMatrix ${isLoading ? 'loading' : 'loaded'}`}
-          className="mlScatterplotMatrix"
+          css={cssOverrides}
         >
           <EuiFlexGroup>
             <EuiFlexItem>