Fixes UI bugs in semantic text UI and index mgmt mappings tab (#209638)

## Summary

A few minor UI clean up fixes on the index mappings tab for Stack
Management. Also touches the inference popover (shows on both search and
stack management views)

- Fixes layout shift when choosing semantic text as a field option
- Changs about panel to `subdued`
- Fixes responsive behavior for about panel
  - max-width on large breakpoint
- Inference popover styling updates 
- Decreases gap size in mapping column to reduce space between sections

_Responsive and About panel updates_
![CleanShot 2025-02-04 at 14 24
16@2x](https://github.com/user-attachments/assets/448bc537-6f98-4c34-96df-f553f089dca2)
![CleanShot 2025-02-04 at 14 14
15@2x](https://github.com/user-attachments/assets/0dd6851c-6299-47b6-9549-38f7ce822427)


_Inference popover styling cleanup_
![CleanShot 2025-02-04 at 11 19
50@2x](https://github.com/user-attachments/assets/fdfef447-6d35-419b-a276-55c1b442d749)


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] ~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/src/platform/packages/shared/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
- [ ] ~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)~
- [ ] ~This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ]

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Samiul Monir <samiul.monir@elastic.co>

x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/select_inference_id.tsx

@@ -7,11 +7,11 @@
 
 import {
   EuiButton,
-  EuiCallOut,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiFormRow,
   EuiHorizontalRule,
   EuiPanel,
   EuiPopover,
@@ -19,7 +19,6 @@ import {
   EuiSelectableOption,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiIcon,
   EuiLink,
   EuiLoadingSpinner,
@@ -160,7 +159,7 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
         </>
       }
       isOpen={isInferencePopoverVisible}
-      panelPaddingSize="m"
+      panelPaddingSize="none"
       closePopover={() => setIsInferencePopoverVisible(!isInferencePopoverVisible)}
     >
       <EuiContextMenuPanel>
@@ -204,55 +203,55 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
         )}
       </EuiContextMenuPanel>
       <EuiHorizontalRule margin="none" />
-      <EuiPanel color="transparent" paddingSize="s">
-        <EuiTitle size="xxxs">
-          <h3>
-            {i18n.translate(
+      <EuiContextMenuPanel>
+        <EuiPanel color="transparent" paddingSize="s">
+          <EuiFormRow
+            label={i18n.translate(
               'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.Label',
               {
                 defaultMessage: 'Existing endpoints',
               }
             )}
-          </h3>
-        </EuiTitle>
-        <EuiSpacer size="xs" />
-
-        <EuiSelectable
-          aria-label={i18n.translate(
-            'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.ariaLabel',
-            {
-              defaultMessage: 'Existing endpoints',
-            }
-          )}
-          data-test-subj={dataTestSubj}
-          searchable
-          isLoading={isLoading}
-          singleSelection="always"
-          defaultChecked
-          searchProps={{
-            compressed: true,
-            placeholder: i18n.translate(
-              'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.placeholder',
-              {
-                defaultMessage: 'Search',
-              }
-            ),
-          }}
-          options={options}
-          onChange={(newOptions) => {
-            setValue(newOptions.find((option) => option.checked)?.label || '');
-          }}
-        >
-          {(list, search) => (
-            <>
-              {search}
-              {list}
-            </>
-          )}
-        </EuiSelectable>
-      </EuiPanel>
+          >
+            <EuiSelectable
+              aria-label={i18n.translate(
+                'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.ariaLabel',
+                {
+                  defaultMessage: 'Existing endpoints',
+                }
+              )}
+              data-test-subj={dataTestSubj}
+              searchable
+              isLoading={isLoading}
+              singleSelection="always"
+              defaultChecked
+              searchProps={{
+                compressed: true,
+                placeholder: i18n.translate(
+                  'xpack.idxMgmt.mappingsEditor.parameters.inferenceId.popover.selectable.placeholder',
+                  {
+                    defaultMessage: 'Search',
+                  }
+                ),
+              }}
+              options={options}
+              onChange={(newOptions) => {
+                setValue(newOptions.find((option) => option.checked)?.label || '');
+              }}
+            >
+              {(list, search) => (
+                <>
+                  {search}
+                  <EuiHorizontalRule margin="xs" />
+                  {list}
+                </>
+              )}
+            </EuiSelectable>
+          </EuiFormRow>
+        </EuiPanel>
+      </EuiContextMenuPanel>
       <EuiHorizontalRule margin="none" />
-      <EuiContextMenuItem icon={<EuiIcon type="help" color="primary" />} size="s">
+      <EuiContextMenuItem icon={<EuiIcon type="help" color="primary" />} size="m">
         <EuiLink
           href={docLinks.links.inferenceManagement.inferenceAPIDocumentation}
           target="_blank"
@@ -271,7 +270,7 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
   return (
     <>
       <EuiSpacer />
-      <EuiFlexGroup data-test-subj="selectInferenceId">
+      <EuiFlexGroup data-test-subj="selectInferenceId" alignItems="flexEnd">
         <EuiFlexItem grow={false}>
           {inferencePopover()}
           {isInferenceFlyoutVisible ? (
@@ -286,18 +285,20 @@ const SelectInferenceIdContent: React.FC<SelectInferenceIdContentProps> = ({
             </Suspense>
           ) : null}
         </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          <EuiCallOut
-            size="s"
-            color="warning"
-            title={i18n.translate(
-              'xpack.idxMgmt.mappingsEditor.parameters.noReferenceModelStartWarningMessage',
-              {
-                defaultMessage:
-                  'The referenced model for this inference endpoint will be started when adding this field.',
-              }
-            )}
-          />
+        <EuiFlexItem grow={false}>
+          <EuiPanel color="transparent" paddingSize="s">
+            <EuiText color="subdued" size="s">
+              <p>
+                {i18n.translate(
+                  'xpack.idxMgmt.mappingsEditor.parameters.noReferenceModelStartWarningMessage',
+                  {
+                    defaultMessage:
+                      'The referenced model for this inference endpoint will be started when adding this field.',
+                  }
+                )}
+              </p>
+            </EuiText>
+          </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>

x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx

@@ -11,16 +11,15 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiOutsideClickDetector,
+  EuiPanel,
   EuiSpacer,
-  useEuiTheme,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { TrainedModelStat } from '@kbn/ml-plugin/common/types/trained_models';
 import { MlPluginStart } from '@kbn/ml-plugin/public';
 import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
-import { EUI_SIZE, TYPE_DEFINITION } from '../../../../constants';
+import { TYPE_DEFINITION } from '../../../../constants';
 import { fieldSerializer } from '../../../../lib';
 import { getFieldByPathName, isSemanticTextField } from '../../../../lib/utils';
 import { useDispatch, useMappingsState } from '../../../../mappings_state_context';
@@ -281,16 +280,9 @@ export const CreateField = React.memo(function CreateFieldComponent({
     </EuiFlexGroup>
   );
 
-  const { euiTheme } = useEuiTheme();
-
-  const paddingLeftCreateFieldWrapper = `${
-    isMultiField
-      ? paddingLeft! - EUI_SIZE * 1.5 // As there are no "L" bullet list we need to substract some indent
-      : paddingLeft
-  }px`;
-
   return (
     <>
+      <EuiSpacer size="s" />
       <EuiOutsideClickDetector onOutsideClick={onClickOutside}>
         <Form
           form={form}
@@ -298,18 +290,15 @@ export const CreateField = React.memo(function CreateFieldComponent({
           onSubmit={submitForm}
           data-test-subj="createFieldForm"
         >
-          <div
+          <EuiPanel
+            color="subdued"
+            paddingSize="m"
             className={classNames('mappingsEditor__createFieldWrapper', {
               'mappingsEditor__createFieldWrapper--toggle':
                 Boolean(maxNestedDepth) && maxNestedDepth! > 0,
               'mappingsEditor__createFieldWrapper--multiField': isMultiField,
             })}
-            css={css`
-              padding: ${euiTheme.size.l};
-              paddingleft: ${paddingLeftCreateFieldWrapper};
-              background-color: ${euiTheme.colors.backgroundBaseSubdued};
-            `}
-            ref={createFieldFormRef}
+            panelRef={createFieldFormRef}
             tabIndex={0}
           >
             <div className="mappingsEditor__createFieldContent">
@@ -320,7 +309,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
               {isSemanticText && <SelectInferenceId />}
               {renderFormActions()}
             </div>
-          </div>
+          </EuiPanel>
         </Form>
       </EuiOutsideClickDetector>
     </>

x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx

@@ -22,6 +22,7 @@ import {
   EuiText,
   EuiTitle,
   useGeneratedHtmlId,
+  useEuiBreakpoint,
   EuiToolTip,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -402,24 +403,27 @@ export const DetailsPageMappingsContent: FunctionComponent<{
       <EuiSpacer />
     </EuiFlexItem>
   );
+
+  const showAboutMappingsStyles = css`
+    ${useEuiBreakpoint(['xl'])} {
+      max-width: 480px;
+    }
+  `;
+
+  const mappingsWrapperStyles = css`
+    height: 100%;
+    ${useEuiBreakpoint(['xl'])} {
+      flex-wrap: nowrap;
+    }
+  `;
+
   return (
     // using "rowReverse" to keep docs links on the top of the mappings code block on smaller screen
     <>
-      <EuiFlexGroup
-        wrap
-        direction="rowReverse"
-        css={css`
-          height: 100%;
-        `}
-      >
+      <EuiFlexGroup wrap direction="rowReverse" css={mappingsWrapperStyles}>
         {showAboutMappings && (
-          <EuiFlexItem
-            grow={1}
-            css={css`
-              min-width: 400px;
-            `}
-          >
-            <EuiPanel grow={false} paddingSize="l">
+          <EuiFlexItem grow={false} css={showAboutMappingsStyles}>
+            <EuiPanel grow={false} paddingSize="l" color="subdued">
               <EuiFlexGroup alignItems="center" gutterSize="s">
                 <EuiFlexItem grow={false}>
                   <EuiIcon type="iInCircle" />
@@ -467,7 +471,7 @@ export const DetailsPageMappingsContent: FunctionComponent<{
             )}
           </EuiFlexItem>
         )}
-        <EuiFlexGroup direction="column">
+        <EuiFlexGroup direction="column" gutterSize="s">
           <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <MappingsFilter
@@ -551,14 +555,14 @@ export const DetailsPageMappingsContent: FunctionComponent<{
               </EuiFilterGroup>
             </EuiFlexItem>
           </EuiFlexGroup>
-          <EuiFlexItem grow={true}>
-            {hasMLPermissions && (
+          {hasMLPermissions && (
+            <EuiFlexItem grow={true}>
               <SemanticTextBanner
                 isSemanticTextEnabled={isSemanticTextEnabled}
                 isPlatinumLicense={isPlatinumLicense}
               />
-            )}
-          </EuiFlexItem>
+            </EuiFlexItem>
+          )}
           {errorSavingMappings}
           {isAddingFields && (
             <EuiFlexItem grow={false} ref={pendingFieldsRef} tabIndex={0}>