Skip to content

[9.3] [Index Management] Align elements with 400% zoom (#258405)#259281

Merged
kibanamachine merged 1 commit intoelastic:9.3from
kibanamachine:backport/9.3/pr-258405
Mar 24, 2026
Merged

[9.3] [Index Management] Align elements with 400% zoom (#258405)#259281
kibanamachine merged 1 commit intoelastic:9.3from
kibanamachine:backport/9.3/pr-258405

Conversation

@kibanamachine
Copy link
Copy Markdown
Contributor

Backport

This will backport the following commits from main to 9.3:

Questions ?

Please refer to the Backport tool documentation

Closes elastic#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
<img width="1489" height="806" alt="Screenshot 2026-03-18 at 17 27 13"
src="https://github.com/user-attachments/assets/145f9efc-bf8e-4f30-a092-d2ad9cba8b11"
/>
<img width="1427" height="423" alt="Screenshot 2026-03-18 at 17 28 35"
src="https://github.com/user-attachments/assets/ca001ce5-b71f-409c-811c-acfa9bcbb072"
/>
<img width="1475" height="796" alt="Screenshot 2026-03-20 at 16 40 54"
src="https://github.com/user-attachments/assets/f181c689-061b-4ee0-9318-2a9e15c53894"
/>

**Accessibility notes**
- WCAG: 1.4.10 Reflow (AA)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Damian Polewski <125268832+damian-polewski@users.noreply.github.com>
(cherry picked from commit 5eb933c)
@kibanamachine kibanamachine added the backport This PR is a backport of another PR label Mar 24, 2026
@kibanamachine kibanamachine enabled auto-merge (squash) March 24, 2026 09:35
@kibanamachine kibanamachine merged commit 29e3c30 into elastic:9.3 Mar 24, 2026
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants