[Roles] ComboBox overflow fix (elastic#184722)

## Summary

Fixed `ComboBox` overflow with large chips. Applies to the following
fields:
- Indices.
- Remote indices.
- Remote clusters.


<img width="1242" alt="Screenshot 2024-06-04 at 11 43 39"
src="https://github.com/elastic/kibana/assets/165678770/ee6dc3e3-0c6b-449b-85a7-7d82acb51b8e">



https://github.com/elastic/kibana/assets/165678770/f6bbc325-a957-4c3e-bc88-721b77dc8ff0

Options considered:

1. **Flex with specific grow attribute set**. 
This will not stop the `ComboBox` from growing after it reaches 50%
point of available space.
    ```
        <EuiFlexGroup>
          <EuiFlexItem grow={5}>...</EuiFlexItem>
          <EuiFlexItem grow={5}>...</EuiFlexItem>
        </EuiFlexGroup>
    ```
2. **Grid with columns.**
    ```
      <EuiFlexGrid columns={2}>
        <EuiFlexItem>...</EuiFlexItem>
        <EuiFlexItem>...</EuiFlexItem>
      </EuiFlexGrid>
    ```
    CSS is the following. 
    ```
    grid-template-columns: repeat(2, 1fr);
    ```
The problem is that `1fr` is about the distribution of available space,
as soon as content of `ComboBox` becomes bigger it breaks.

3. **Combobox props.**
We have `fullWidth` attribute set that we need for stretching to
available column space, so the content doesn't wrap unless there is the
`maxWidth` set for column. Alternative is to remove `fullWidth` which
wraps chips correctly, but then doesn't satisfy the design.
4. **`maxWidth` for `EuiFlexItem`.**
```
    <EuiFlexGroup>
      <EuiFlexItem style={{ maxWidth: '50%' }}>...</EuiFlexItem>
      <EuiFlexItem style={{ maxWidth: '50%' }}>...</EuiFlexItem>
    </EuiFlexGroup>
```
That option works, but since we have the same form for index privileges
and remote index privileges, we would need to justify it for 2 columns
(maxWidth: '50%' ), 3 columns (maxWidth: '33%' ) and mobile accordingly
(maxWidth: '100%' ).
Can be less scalable.

4. Leverage grid `minmax`.
```
grid-template-columns: repeat(N, minmax(0, 1fr));
```
It allows to create columns as large as `1fr` and not exceed it, so
`ComboBox` will nicely fit.

### Checklist

- [x] [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] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] 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))
- [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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

__Fixes: https://github.com/elastic/kibana/issues/183311__

### Release note
Fixed `ComboBox` overflow with large chips.

---------

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx

@@ -9,13 +9,15 @@ import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import {
   EuiButtonIcon,
   EuiComboBox,
+  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
   EuiPanel,
   EuiSpacer,
   EuiSwitch,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import _ from 'lodash';
 import React, { Component, Fragment } from 'react';
 
@@ -24,6 +26,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { monaco } from '@kbn/monaco';
 import type { Cluster } from '@kbn/remote-clusters-plugin/public';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { PublicMethodsOf } from '@kbn/utility-types';
 
 import { RemoteClusterComboBox } from './remote_clusters_combo_box';
@@ -127,7 +130,17 @@ export class IndexPrivilegeForm extends Component<Props, State> {
   private getPrivilegeForm = () => {
     return (
       <>
-        <EuiFlexGroup>
+        <EuiFlexGrid
+          css={css`
+            grid-template-columns: repeat(
+              ${this.props.indexType === 'remote_indices' ? 3 : 2},
+              minmax(0, 1fr)
+            );
+            @media (max-width: ${euiThemeVars.euiBreakpoints.s}px) {
+              grid-template-columns: repeat(1, minmax(0, 1fr));
+            }
+          `}
+        >
           {this.props.indexType === 'remote_indices' ? (
             <EuiFlexItem>
               <EuiFormRow
@@ -224,7 +237,7 @@ export class IndexPrivilegeForm extends Component<Props, State> {
               />
             </EuiFormRow>
           </EuiFlexItem>
-        </EuiFlexGroup>
+        </EuiFlexGrid>
 
         {this.getFieldLevelControls()}
         {this.getGrantedDocumentsControl()}

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/remote_cluster_privileges_form.tsx

@@ -9,17 +9,20 @@ import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import {
   EuiButtonIcon,
   EuiComboBox,
+  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
   EuiPanel,
   EuiSpacer,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { Fragment, useCallback } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { Cluster } from '@kbn/remote-clusters-plugin/public';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { RemoteClusterComboBox } from './remote_clusters_combo_box';
 import type { RoleRemoteClusterPrivilege } from '../../../../../../common';
@@ -92,7 +95,14 @@ export const RemoteClusterPrivilegesForm: React.FunctionComponent<Props> = ({
       >
         <EuiFlexItem>
           <EuiPanel color="subdued">
-            <EuiFlexGroup>
+            <EuiFlexGrid
+              css={css`
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+                @media (max-width: ${euiThemeVars.euiBreakpoints.s}px) {
+                  grid-template-columns: repeat(1, minmax(0, 1fr));
+                }
+              `}
+            >
               <EuiFlexItem>
                 <EuiFormRow
                   label={
@@ -147,7 +157,7 @@ export const RemoteClusterPrivilegesForm: React.FunctionComponent<Props> = ({
                   />
                 </EuiFormRow>
               </EuiFlexItem>
-            </EuiFlexGroup>
+            </EuiFlexGrid>
           </EuiPanel>
         </EuiFlexItem>
         {!isRoleReadOnly && (