[Index Management] Align elements with 400% zoom

[SoniaSanzV]

Closes #242866

Summary

• Fix Index Management reflow issues at high zoom (WCAG 2.2 SC 1.4.10 Reflow):
• Ensure Manage index popover stays within the viewport and scrolls internally instead of clipping/overflowing.
• Ensure Mappings field rows wrap cleanly at 400% zoom (no crowded/overlapping layout).

Test plan

• Manual (macOS + Chrome):
• Index details → Overview → open Manage index at 400% zoom; verify title/first item visible, no horizontal overflow, and page content remains visible while menu is open.
• Index details → Mappings tab at 400% zoom; verify field rows wrap and icons don’t overlap text.

Screenshots

Accessibility notes

• WCAG: 1.4.10 Reflow (AA)

Summary by CodeRabbit

• Bug Fixes

  • Fixed layout sizing for document field mappings to improve content flow and responsiveness.

• Style

  • Enhanced responsive design for the mappings list panel with improved breakpoint handling.
  • Improved popover positioning and styling in the index actions menu with better theme integration and dynamic resizing.

• Accessibility

  • Improved semantic markup for multi-field indicators.

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)

[coderabbitai]

Caution

Review failed

The head commit changed during the review from 747cb38 to d8eaf91.

📝 Walkthrough

Walkthrough

This pull request addresses a 400% zoom accessibility issue in the Index Management plugin by modifying CSS sizing behavior and flex layout properties across four components. Changes replace fixed heights with minimum heights, add flex wrapping, implement responsive styling, and enhance popover positioning.

Changes

Cohort / File(s)	Summary
CSS Height Updates x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/common/listItemStyle.ts	Changed fixed height to min-height for field and content elements, allowing flexible vertical expansion at high zoom levels.
Flex Layout & Accessibility x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx	Added wrap attribute to EuiFlexGroup to enable child wrapping and aria-hidden="true" to multi-field indicator icon for semantic accessibility.
Responsive Mappings Panel Styling x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx	Introduced centralized CSS-in-JS style block with min-width: 0 (critical for flex children), width: 100%, height: 100%, and responsive minimum width breakpoint at medium and larger screens.
Popover Positioning & Constraints x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx	Enhanced popover with theme-aware styling, dynamic size constraints (max-height, max-width), responsive viewport-relative sizing, computed anchor position fallback logic, and focus/reposition behavior adjustments.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

release_note:fix

Suggested reviewers

• ElenaStoeva
• damian-polewski

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[Index Management] Align elements with 400% zoom' directly and clearly summarizes the main change—fixing alignment issues at 400% zoom to meet WCAG 2.2 SC 1.4.10 Reflow requirements.
Linked Issues check	✅ Passed	All code changes directly address issue #242866's objectives: CSS modifications ensure popover stays within viewport with internal scrolling, field rows wrap cleanly, and layout reflow is preserved at 400% zoom.
Out of Scope Changes check	✅ Passed	All four file changes are in-scope, focusing on CSS/styling adjustments and accessibility attributes (aria-hidden) to fix zoom reflow issues without introducing unrelated functionality changes.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Tools execution failed with the following error:

Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can use TruffleHog to scan for secrets in your code with verification capabilities.

Add a TruffleHog config file (e.g. trufflehog-config.yml, trufflehog.yml) to your project to customize detectors and scanning behavior. The tool runs only when a config file is present.

[coderabbitai]

🧹 Nitpick comments (1)

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

375-382: useEuiBreakpoint must be called at the component's top level.

The useEuiBreakpoint hook is being called inside a css template literal, which itself is inside the component body but not at the top level. While this currently works because it's being called unconditionally during render, React hooks should be called at the top level of the component for clarity and to avoid future issues if this code is refactored.

Consider extracting the breakpoint value:

♻️ Suggested refactor

+ const mediumBreakpoint = useEuiBreakpoint(['m', 'l', 'xl']);
+
  const mappingsListPanelStyles = css`
    min-width: 0;
    width: 100%;
    height: 100%;
-   ${useEuiBreakpoint(['m', 'l', 'xl'])} {
+   ${mediumBreakpoint} {
      min-width: 600px;
    }
  `;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx`
around lines 375 - 382, The css block calls useEuiBreakpoint inside a template
literal which violates hook top-level rules; move the hook call out of the css
by invoking useEuiBreakpoint at the top of the component (e.g., const isAtLeastM
= useEuiBreakpoint(['m','l','xl']) or similar) and then reference that
boolean/value inside mappingsListPanelStyles instead of calling useEuiBreakpoint
inline; update mappingsListPanelStyles to use the precomputed variable so the
hook is only called at the component top level.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx`:
- Around line 375-382: The css block calls useEuiBreakpoint inside a template
literal which violates hook top-level rules; move the hook call out of the css
by invoking useEuiBreakpoint at the top of the component (e.g., const isAtLeastM
= useEuiBreakpoint(['m','l','xl']) or similar) and then reference that
boolean/value inside mappingsListPanelStyles instead of calling useEuiBreakpoint
inline; update mappingsListPanelStyles to use the precomputed variable so the
hook is only called at the component top level.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: ffa7749f-6ba7-4ba1-bf5c-705d63664f28

📥 Commits

Reviewing files that changed from the base of the PR and between 6c5231b and fbdf293.

📒 Files selected for processing (4)

• x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/common/listItemStyle.ts
• x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
• x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx
• x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.tsx

[damian-polewski]

Hi @SoniaSanzV, looking at the issue description shouldn't the icon be inline or below the text?

Expected Result

All options are visible for the user, text is aligned, icon is below or near the text.

[SoniaSanzV]

Thank you @damian-polewski! Fixed with 747cb38

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: d8eaf91

Failed CI Steps

• Scout: [ security / entity_store ] plugin
• Scout: [ platform / workflows_management ] plugin
• Scout: [ platform / workflows_management ] plugin

Test Failures

• [job] [logs] Scout: [ platform / workflows_management ] plugin / local-serverless-search - Scheduled workflow execution - enabling a scheduled workflow triggers executions automatically
• [job] [logs] Scout: [ platform / workflows_management ] plugin / local-serverless-search - Scheduled workflow execution - enabling a scheduled workflow triggers executions automatically
• [job] [logs] Scout: [ security / entity_store ] plugin / local-stateful-classic - Automated email resolution integration tests - Basic email matching — two entities with same email

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
indexManagement	793.9KB	794.6KB	+629.0B

History

• 💚 Build #412322 succeeded fbdf293

cc @SoniaSanzV

[damian-polewski]

Thank you for addressing my feedback! Retested the flow and everything is working as expected. LGTM!

[kibanamachine]

Starting backport for target branches: 8.19, 9.2, 9.3

https://github.com/elastic/kibana/actions/runs/23482243167

[kibanamachine]

💔 Some backports could not be created

Status	Branch	Result
❌	8.19	Backport failed because of merge conflicts
❌	9.2	Backport failed because of merge conflicts You might need to backport the following PRs to 9.2: - [ResponseOps][Maintenance Window] Maintenance Window does not apply when using wildcard via Query DSL (#256622) - Add shared validation runner package (#258768) - [Skills] Add Buildkite logs skill (#258587) - [Osquery] Cypress - Add SHA512 integrity validation for cached agent (#258842)
✅	9.3

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 258405

Questions ?

Please refer to the Backport tool documentation