Dynamically set pipeline selection list height (#172816)

## Summary

Update the pipeline selection list to set a maximum height that
decreases when there are too few options to fill the space. The maximum
height is set to 4.5 rows, with the extra half row used to indicate to
the user that there are more options available than what is visible
(i.e. they need to scroll). If 4 or fewer options are available, the height is
set to `<option_count>` rows.

(cherry picked from commit 7f61e2a)

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiSelectable, useIsWithinMaxBreakpoint } from '@elastic/eui';
+import { EuiSelectable, useEuiTheme, useIsWithinMaxBreakpoint } from '@elastic/eui';
 
 import { MLInferenceLogic, MLInferencePipelineOption } from './ml_inference_logic';
 import { PipelineSelectOption, PipelineSelectOptionProps } from './pipeline_select_option';
@@ -23,6 +23,15 @@ export const PipelineSelect: React.FC = () => {
 
   const { pipelineName } = configuration;
 
+  const { euiTheme } = useEuiTheme();
+  const largeScreenRowHeight = euiTheme.base * 6;
+  const smallScreenRowHeight = euiTheme.base * 8;
+  const maxVisibleOptions = 4.5;
+  const rowHeight: number = useIsWithinMaxBreakpoint('s')
+    ? smallScreenRowHeight
+    : largeScreenRowHeight;
+  const [height, setHeight] = useState(maxVisibleOptions * rowHeight);
+
   const getPipelineOptions = (
     pipelineOptions: MLInferencePipelineOption[]
   ): PipelineSelectOptionProps[] => {
@@ -50,14 +59,20 @@ export const PipelineSelect: React.FC = () => {
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
         bordered: true,
-        rowHeight: useIsWithinMaxBreakpoint('s') ? 120 : 90,
         showIcons: true,
         onFocusBadge: false,
+        rowHeight,
+      }}
+      searchProps={{
+        onChange: (_, matchingOptions) => {
+          setHeight(Math.min(maxVisibleOptions, matchingOptions.length) * rowHeight);
+        },
       }}
       searchable
       singleSelection="always"
       onChange={onChange}
       renderOption={renderPipelineOption}
+      height={height}
     >
       {(list, search) => (
         <>