From 8f228e614b1d08c120ceeea58175b336cefe79f2 Mon Sep 17 00:00:00 2001
From: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
Date: Wed, 18 Mar 2026 12:43:14 +0100
Subject: [PATCH 1/4] Fix Mappings tab with zoom

---
 .../document_fields/common/listItemStyle.ts     |  4 ++--
 .../document_fields/fields/fields_list_item.tsx |  3 ++-
 .../details_page_mappings_content.tsx           | 17 ++++++++++-------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/common/listItemStyle.ts b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/common/listItemStyle.ts
index 20f5f06859b9a..c49dbda7dbc2a 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/common/listItemStyle.ts
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/common/listItemStyle.ts
@@ -13,7 +13,7 @@ export const getListItemStyle = ({ border, colors, size }: EuiThemeComputed<{}>)
   `,
   field: css`
     border-bottom: ${border.thin};
-    height: calc(${size.xl} * 2);
+    min-height: calc(${size.xl} * 2);
     margin-top: ${size.xs};
   `,
   fieldEnabled: css`
@@ -37,7 +37,7 @@ export const getListItemStyle = ({ border, colors, size }: EuiThemeComputed<{}>)
     padding-left: ${size.m};
   `,
   content: css`
-    height: calc(${size.xl} * 2);
+    min-height: calc(${size.xl} * 2);
     position: relative;
   `,
   contentIndent: css`
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
index 967a3466b580d..280213397f878 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
@@ -231,6 +231,7 @@ function FieldListItemComponent(
           <EuiFlexGroup
             gutterSize="s"
             alignItems="center"
+            wrap
             css={[
               styles.content,
               !hasChildFields &&
@@ -267,7 +268,7 @@ function FieldListItemComponent(
 
             {isMultiField && (
               <EuiFlexItem grow={false}>
-                <EuiIcon color="subdued" type="documents" />
+                <EuiIcon color="subdued" type="documents" aria-hidden="true" />
               </EuiFlexItem>
             )}
 
diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
index 3e49c0a420ab6..ef60e29790ae7 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
@@ -372,6 +372,15 @@ export const DetailsPageMappingsContent: FunctionComponent<{
     }
   `;
 
+  const mappingsListPanelStyles = css`
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+    ${useEuiBreakpoint(['m', 'l', 'xl'])} {
+      min-width: 600px;
+    }
+  `;
+
   const saveMappingsButton = (
     <EuiButton
       onClick={() => updateMappings()}
@@ -562,13 +571,7 @@ export const DetailsPageMappingsContent: FunctionComponent<{
             </EuiFlexItem>
           )}
           {hasMappings && (
-            <EuiFlexItem
-              grow={false}
-              css={css`
-                min-width: 600px;
-                height: 100%;
-              `}
-            >
+            <EuiFlexItem grow={false} css={mappingsListPanelStyles}>
               <EuiPanel hasShadow={false} paddingSize="none">
                 {isJSONVisible ? jsonBlock : treeViewBlock}
               </EuiPanel>

From fbdf293de481493bf349c02131ae14f54dd9f899 Mon Sep 17 00:00:00 2001
From: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
Date: Wed, 18 Mar 2026 17:23:15 +0100
Subject: [PATCH 2/4] Fix popover

---
 .../index_actions_context_menu.tsx            | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx
index 731f4e71e003e..8a0519986a4fa 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx
@@ -11,7 +11,15 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { every } from 'lodash';
 import type { EuiPopoverProps, EuiButtonProps } from '@elastic/eui';
-import { EuiButton, EuiContextMenu, EuiPopover, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiContextMenu,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import type { HttpSetup } from '@kbn/core-http-browser';
 import { flattenPanelTree } from '../../../../lib/flatten_panel_tree';
@@ -80,7 +88,7 @@ export const IndexActionsContextMenu = ({
   indices,
   isOnListView,
   resetSelection,
-  anchorPosition = 'rightUp',
+  anchorPosition,
   iconSide = 'right',
   iconType = 'chevronSingleDown',
   label,
@@ -108,6 +116,21 @@ export const IndexActionsContextMenu = ({
 
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   const modalRef = useRef<ModalHostHandles | null>(null);
+  const { euiTheme } = useEuiTheme();
+  const computedAnchorPosition: EuiPopoverProps['anchorPosition'] =
+    anchorPosition ?? (isOnListView ? 'downLeft' : 'downRight');
+
+  const popoverStyles = css`
+    overflow-x: hidden;
+    max-height: min(60vh, calc(100vh - ${euiTheme.size.xxxl} - ${euiTheme.size.m}));
+    max-width: calc(100vw - ${euiTheme.size.xl});
+    @supports (height: 100dvh) {
+      max-height: min(60dvh, calc(100dvh - ${euiTheme.size.xxxl} - ${euiTheme.size.m}));
+    }
+    @supports (width: 100dvw) {
+      max-width: calc(100dvw - ${euiTheme.size.xl});
+    }
+  `;
 
   const onButtonClick = () => {
     setIsPopoverOpen((prevState) => !prevState);
@@ -446,9 +469,14 @@ export const IndexActionsContextMenu = ({
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
+        ownFocus={false}
         panelPaddingSize="none"
-        anchorPosition={anchorPosition}
+        anchorPosition={computedAnchorPosition}
         repositionOnScroll
+        repositionToCrossAxis={false}
+        panelProps={{
+          css: popoverStyles,
+        }}
       >
         <EuiContextMenu data-test-subj="indexContextMenu" initialPanelId={0} panels={panels} />
       </EuiPopover>

From 747cb38c6606bb1592b34440540ac9d5acd61c2a Mon Sep 17 00:00:00 2001
From: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
Date: Fri, 20 Mar 2026 16:44:36 +0100
Subject: [PATCH 3/4] Fix alignmenet

---
 .../fields/fields_list_item.tsx               | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
index 280213397f878..8d52b9ebe6cf7 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
@@ -266,18 +266,22 @@ function FieldListItemComponent(
               </EuiFlexItem>
             )}
 
-            {isMultiField && (
-              <EuiFlexItem grow={false}>
-                <EuiIcon color="subdued" type="documents" aria-hidden="true" />
-              </EuiFlexItem>
-            )}
+            <EuiFlexItem>
+              <EuiFlexGroup gutterSize="s" alignItems="center" wrap={false} responsive={false}>
+                {isMultiField && (
+                  <EuiFlexItem grow={false}>
+                    <EuiIcon color="subdued" type="documents" aria-hidden="true" />
+                  </EuiFlexItem>
+                )}
 
-            <EuiFlexItem
-              grow={false}
-              data-test-subj={`fieldName ${dataTestSubj}-fieldName`}
-              aria-label={i18nTexts.fieldListNameLabel}
-            >
-              {source.name}
+                <EuiFlexItem
+                  grow={false}
+                  data-test-subj={`fieldName ${dataTestSubj}-fieldName`}
+                  aria-label={i18nTexts.fieldListNameLabel}
+                >
+                  {source.name}
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
 
             <EuiFlexGroup aria-label={i18nTexts.fieldListTypesLabel}>

From 603fec35125ccf8899cc34121307ab6f03dacf66 Mon Sep 17 00:00:00 2001
From: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
Date: Mon, 23 Mar 2026 10:45:37 +0100
Subject: [PATCH 4/4] Update
 x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx

Co-authored-by: Damian Polewski <125268832+damian-polewski@users.noreply.github.com>
---
 .../index_actions_context_menu/index_actions_context_menu.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx
index 8a0519986a4fa..0e7a18da041d9 100644
--- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx
+++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx
@@ -469,7 +469,6 @@ export const IndexActionsContextMenu = ({
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
-        ownFocus={false}
         panelPaddingSize="none"
         anchorPosition={computedAnchorPosition}
         repositionOnScroll