[Unified Field List] Fix issue where Unified Field List field popover…

… gets cut off (#195147)

## Summary

This PR fixes an issue where the Unified Field List field popover can
get cut off if its contents exceed the view height. Now, instead of
cutting off the popover, we limit the content height to `90vh` and make
the main section scrollable.

Before (from #194313 test failure):

![image](https://github.com/user-attachments/assets/5927a899-a18a-4431-bd1d-6bb2682cd004)

After:

![scroll](https://github.com/user-attachments/assets/5071a52b-fbf4-4d05-96de-61858d9e5598)

Flaky test runs:
-
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/7098

Fixes #194313.
Fixes #193934.
Fixes #193781.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>

packages/kbn-unified-field-list/src/components/field_popover/field_popover.tsx

@@ -8,23 +8,33 @@
  */
 
 import React from 'react';
-import { EuiPopover, EuiPopoverProps, EuiPopoverTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiPopoverProps,
+  EuiPopoverTitle,
+} from '@elastic/eui';
 import './field_popover.scss';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 export interface FieldPopoverProps extends EuiPopoverProps {
   renderHeader?: () => React.ReactNode;
   renderContent?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
 }
 
 export const FieldPopover: React.FC<FieldPopoverProps> = ({
   isOpen,
   closePopover,
   renderHeader,
   renderContent,
+  renderFooter,
   ...otherPopoverProps
 }) => {
-  let header = null;
-  let content = null;
+  let header: React.ReactNode | null = null;
+  let content: React.ReactNode | null = null;
+  let footer: React.ReactNode | null = null;
 
   if (isOpen) {
     try {
@@ -40,6 +50,13 @@ export const FieldPopover: React.FC<FieldPopoverProps> = ({
       // eslint-disable-next-line no-console
       console.error(error);
     }
+
+    try {
+      footer = renderFooter?.() || null;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
   }
 
   return (
@@ -54,10 +71,27 @@ export const FieldPopover: React.FC<FieldPopoverProps> = ({
       {...otherPopoverProps}
     >
       {isOpen && (
-        <>
-          {content && header ? <EuiPopoverTitle>{header}</EuiPopoverTitle> : header}
-          {content}
-        </>
+        <EuiFlexGroup gutterSize="none" direction="column" css={{ maxHeight: '90vh' }}>
+          {Boolean(header) && (
+            <EuiFlexItem grow={false}>
+              {content ? <EuiPopoverTitle>{header}</EuiPopoverTitle> : header}
+            </EuiFlexItem>
+          )}
+          {content ? (
+            <EuiFlexItem
+              className="eui-yScrollWithShadows"
+              css={{
+                padding: euiThemeVars.euiSize,
+                margin: `-${euiThemeVars.euiSize}`,
+              }}
+            >
+              {content}
+            </EuiFlexItem>
+          ) : (
+            content
+          )}
+          {Boolean(footer) && <EuiFlexItem grow={false}>{footer}</EuiFlexItem>}
+        </EuiFlexGroup>
       )}
     </EuiPopover>
   );

packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx

@@ -309,22 +309,39 @@ function UnifiedFieldListItemComponent({
             />
           </>
         )}
-
-        {searchMode === 'documents' && !!services.uiActions && (
-          <FieldPopoverFooter
-            field={field}
-            dataView={dataView}
-            multiFields={rawMultiFields}
-            trackUiMetric={trackUiMetric}
-            contextualFields={workspaceSelectedFieldNames}
-            originatingApp={stateService.creationOptions.originatingApp}
-            uiActions={services.uiActions}
-          />
-        )}
       </>
     );
   };
 
+  const renderFooter = useMemo(() => {
+    const uiActions = services.uiActions;
+
+    if (searchMode !== 'documents' || !uiActions) {
+      return;
+    }
+
+    return () => (
+      <FieldPopoverFooter
+        field={field}
+        dataView={dataView}
+        multiFields={rawMultiFields}
+        trackUiMetric={trackUiMetric}
+        contextualFields={workspaceSelectedFieldNames}
+        originatingApp={stateService.creationOptions.originatingApp}
+        uiActions={uiActions}
+      />
+    );
+  }, [
+    dataView,
+    field,
+    rawMultiFields,
+    searchMode,
+    services.uiActions,
+    stateService.creationOptions.originatingApp,
+    trackUiMetric,
+    workspaceSelectedFieldNames,
+  ]);
+
   const value = useMemo(
     () => ({
       id: field.name,
@@ -393,6 +410,7 @@ function UnifiedFieldListItemComponent({
           ? renderPopover
           : undefined
       }
+      renderFooter={renderFooter}
     />
   );
 }

packages/kbn-unified-field-list/tsconfig.json

@@ -34,7 +34,8 @@
     "@kbn/visualization-utils",
     "@kbn/esql-utils",
     "@kbn/search-types",
-    "@kbn/fields-metadata-plugin"
+    "@kbn/fields-metadata-plugin",
+    "@kbn/ui-theme"
   ],
   "exclude": ["target/**/*"]
 }