[8.11] [ML] Data Frame analytics outlier detection results: ensure scatterplot matrix adheres to bounding box (#167941) (#168114)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[ML] Data Frame analytics outlier detection results: ensure
scatterplot matrix adheres to bounding box
(#167941)](https://github.com/elastic/kibana/pull/167941)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Melissa
Alvarez","email":"melissa.alvarez@elastic.co"},"sourceCommit":{"committedDate":"2023-10-05T15:02:22Z","message":"[ML]
Data Frame analytics outlier detection results: ensure scatterplot
matrix adheres to bounding box (#167941)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/144709\r\n\r\nEnsures
scatterplot matrix does not over flow bounding box. \r\nThe css already
had an overflow property for 'mlScatterplotMatrix' but\r\nthe class was
never added to the parent div. This PR adds the class to\r\nthe
appropriate div so scatterplot matrix does not overlfow.\r\n\r\n<img
width=\"1102\"
alt=\"image\"\r\nsrc=\"08cbcec2-e1cb-41a4-a570-258071219320\">\r\n\r\n<img
width=\"914\"
alt=\"image\"\r\nsrc=\"ac885ed7-926b-4afe-b270-9b6035d9dc74\">\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"93b67fe732ec09fcb049b269d0750044161c97d1","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Feature:Data
Frame
Analytics","v8.11.0","v8.12.0"],"number":167941,"url":"https://github.com/elastic/kibana/pull/167941","mergeCommit":{"message":"[ML]
Data Frame analytics outlier detection results: ensure scatterplot
matrix adheres to bounding box (#167941)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/144709\r\n\r\nEnsures
scatterplot matrix does not over flow bounding box. \r\nThe css already
had an overflow property for 'mlScatterplotMatrix' but\r\nthe class was
never added to the parent div. This PR adds the class to\r\nthe
appropriate div so scatterplot matrix does not overlfow.\r\n\r\n<img
width=\"1102\"
alt=\"image\"\r\nsrc=\"08cbcec2-e1cb-41a4-a570-258071219320\">\r\n\r\n<img
width=\"914\"
alt=\"image\"\r\nsrc=\"ac885ed7-926b-4afe-b270-9b6035d9dc74\">\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"93b67fe732ec09fcb049b269d0750044161c97d1"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/167941","number":167941,"mergeCommit":{"message":"[ML]
Data Frame analytics outlier detection results: ensure scatterplot
matrix adheres to bounding box (#167941)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/144709\r\n\r\nEnsures
scatterplot matrix does not over flow bounding box. \r\nThe css already
had an overflow property for 'mlScatterplotMatrix' but\r\nthe class was
never added to the parent div. This PR adds the class to\r\nthe
appropriate div so scatterplot matrix does not overlfow.\r\n\r\n<img
width=\"1102\"
alt=\"image\"\r\nsrc=\"08cbcec2-e1cb-41a4-a570-258071219320\">\r\n\r\n<img
width=\"914\"
alt=\"image\"\r\nsrc=\"ac885ed7-926b-4afe-b270-9b6035d9dc74\">\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"93b67fe732ec09fcb049b269d0750044161c97d1"}}]}]
BACKPORT-->

Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>

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

@@ -5,4 +5,4 @@
     font-size: $euiFontSizeXS;
     padding: 0 $euiSizeXS;
   }
-}
+}

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

@@ -412,7 +412,10 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
       {splom === undefined || vegaSpec === undefined ? (
         <VegaChartLoading />
       ) : (
-        <div data-test-subj={`mlScatterplotMatrix ${isLoading ? 'loading' : 'loaded'}`}>
+        <div
+          data-test-subj={`mlScatterplotMatrix ${isLoading ? 'loading' : 'loaded'}`}
+          className="mlScatterplotMatrix"
+        >
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiFormRow