[Lens] Fix layer editor scrolling in full lens editor#253247
Merged
walterra merged 14 commits intoelastic:mainfrom Feb 17, 2026
Merged
[Lens] Fix layer editor scrolling in full lens editor#253247walterra merged 14 commits intoelastic:mainfrom
walterra merged 14 commits intoelastic:mainfrom
Conversation
walterra
added
release_note:fix
Team:Visualizations
...m/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx
Show resolved
Hide resolved
Contributor
|
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
...plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
Outdated
Show resolved
Hide resolved
mariairiartef
approved these changes
Feb 17, 2026
Contributor
mariairiartef
left a comment
mariairiartef
left a comment
There was a problem hiding this comment.
Tested locally and I didn't find any issue! 🚀 (a part from the issue we already discussed offline, that it will fixed in a followup PR)
markov00
approved these changes
Feb 17, 2026
Contributor
markov00
left a comment
markov00
left a comment
There was a problem hiding this comment.
Tested locally on Firefox, Safari and Chrome, the scroll to work fine
Contributor
|
Starting backport for target branches: 9.3 |
Contributor
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
walterra
added a commit
to walterra/kibana
that referenced
this pull request
Feb 17, 2026
## Summary Fixes elastic#244198 (flaky layer config tests). Fixes elastic#253050 (layer config not scrollable in full lens editor). - Restructured the config panel layout in `editor_frame.tsx` to use a flex container with overflow handling - Extracted inline CSS into `componentStyles` object in `editor_frame.tsx` for consistency across the file - Fixed flaky layer_actions FTR test by improving the logic to make layer tabs visible ### How to test - Open full lens editor and reduce the height of the browser window - Add some dimension configs so the config panel grows beyond the visible area - Check the config panel is scrollable so you can reach the bottom element like the breakdown form - Check it works for single layer charts (no tabs) and multi layer charts (visible tabs) ### FTR tests - Server: `node scripts/functional_tests_server --config x-pack/platform/test/functional/apps/lens/group2/config.ts` - Runner (layer config no longer flaky): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens layer actions tests"` - Runner (scroll test): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens config panel scroll"` ### 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] 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 - [x] 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) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Release notes Fixes config panel scrolling in the Lens editor. Previously, when the config panel content exceeded the available height (e.g., with multiple dimensions or small viewport), users could not scroll to access all configuration options. (cherry picked from commit 1fd818b) # Conflicts: # src/platform/packages/shared/kbn-lens-common/index.ts # x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx # x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
walterra
added a commit
that referenced
this pull request
Feb 17, 2026
…#253410) # Backport This will backport the following commits from `main` to `9.3`: - [[Lens] Fix layer editor scrolling in full lens editor (#253247)](#253247) <!--- Backport version: 10.2.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Walter M. Rafelsberger","email":"walter.rafelsberger@elastic.co"},"sourceCommit":{"committedDate":"2026-02-17T10:15:35Z","message":"[Lens] Fix layer editor scrolling in full lens editor (#253247)\n\n## Summary\n\nFixes #244198 (flaky layer config tests). Fixes #253050 (layer config\nnot scrollable in full lens editor).\n\n- Restructured the config panel layout in `editor_frame.tsx` to use a\nflex container with overflow handling\n- Extracted inline CSS into `componentStyles` object in\n`editor_frame.tsx` for consistency across the file\n- Fixed flaky layer_actions FTR test by improving the logic to make\nlayer tabs visible\n\n### How to test\n\n- Open full lens editor and reduce the height of the browser window\n- Add some dimension configs so the config panel grows beyond the\nvisible area\n- Check the config panel is scrollable so you can reach the bottom\nelement like the breakdown form\n- Check it works for single layer charts (no tabs) and multi layer\ncharts (visible tabs)\n\n### FTR tests\n\n- Server: `node scripts/functional_tests_server --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts`\n- Runner (layer config no longer flaky): `node\nscripts/functional_test_runner --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts --grep \"lens\nlayer actions tests\"`\n- Runner (scroll test): `node scripts/functional_test_runner --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts --grep \"lens\nconfig panel scroll\"`\n\n### Checklist\n\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n- [x] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.\n\n### Release notes\n\nFixes config panel scrolling in the Lens editor. Previously, when the\nconfig panel content exceeded the available height (e.g., with multiple\ndimensions or small viewport), users could not scroll to access all\nconfiguration options.","sha":"1fd818b36c9f0dc132e3b32f6c43546640c6ba78","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","backport:version","v9.4.0","v9.3.1"],"title":"[Lens] Fix layer editor scrolling in full lens editor","number":253247,"url":"https://github.com/elastic/kibana/pull/253247","mergeCommit":{"message":"[Lens] Fix layer editor scrolling in full lens editor (#253247)\n\n## Summary\n\nFixes #244198 (flaky layer config tests). Fixes #253050 (layer config\nnot scrollable in full lens editor).\n\n- Restructured the config panel layout in `editor_frame.tsx` to use a\nflex container with overflow handling\n- Extracted inline CSS into `componentStyles` object in\n`editor_frame.tsx` for consistency across the file\n- Fixed flaky layer_actions FTR test by improving the logic to make\nlayer tabs visible\n\n### How to test\n\n- Open full lens editor and reduce the height of the browser window\n- Add some dimension configs so the config panel grows beyond the\nvisible area\n- Check the config panel is scrollable so you can reach the bottom\nelement like the breakdown form\n- Check it works for single layer charts (no tabs) and multi layer\ncharts (visible tabs)\n\n### FTR tests\n\n- Server: `node scripts/functional_tests_server --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts`\n- Runner (layer config no longer flaky): `node\nscripts/functional_test_runner --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts --grep \"lens\nlayer actions tests\"`\n- Runner (scroll test): `node scripts/functional_test_runner --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts --grep \"lens\nconfig panel scroll\"`\n\n### Checklist\n\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n- [x] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.\n\n### Release notes\n\nFixes config panel scrolling in the Lens editor. Previously, when the\nconfig panel content exceeded the available height (e.g., with multiple\ndimensions or small viewport), users could not scroll to access all\nconfiguration options.","sha":"1fd818b36c9f0dc132e3b32f6c43546640c6ba78"}},"sourceBranch":"main","suggestedTargetBranches":["9.3"],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/253247","number":253247,"mergeCommit":{"message":"[Lens] Fix layer editor scrolling in full lens editor (#253247)\n\n## Summary\n\nFixes #244198 (flaky layer config tests). Fixes #253050 (layer config\nnot scrollable in full lens editor).\n\n- Restructured the config panel layout in `editor_frame.tsx` to use a\nflex container with overflow handling\n- Extracted inline CSS into `componentStyles` object in\n`editor_frame.tsx` for consistency across the file\n- Fixed flaky layer_actions FTR test by improving the logic to make\nlayer tabs visible\n\n### How to test\n\n- Open full lens editor and reduce the height of the browser window\n- Add some dimension configs so the config panel grows beyond the\nvisible area\n- Check the config panel is scrollable so you can reach the bottom\nelement like the breakdown form\n- Check it works for single layer charts (no tabs) and multi layer\ncharts (visible tabs)\n\n### FTR tests\n\n- Server: `node scripts/functional_tests_server --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts`\n- Runner (layer config no longer flaky): `node\nscripts/functional_test_runner --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts --grep \"lens\nlayer actions tests\"`\n- Runner (scroll test): `node scripts/functional_test_runner --config\nx-pack/platform/test/functional/apps/lens/group2/config.ts --grep \"lens\nconfig panel scroll\"`\n\n### Checklist\n\n- [x] [Unit or functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere updated or added to match the most common scenarios\n- [x] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.\n\n### Release notes\n\nFixes config panel scrolling in the Lens editor. Previously, when the\nconfig panel content exceeded the available height (e.g., with multiple\ndimensions or small viewport), users could not scroll to access all\nconfiguration options.","sha":"1fd818b36c9f0dc132e3b32f6c43546640c6ba78"}},{"branch":"9.3","label":"v9.3.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Contributor
Author
|
Created a follow up issue to document the cut off drag'n'drop extra item found testing this PR: #253469 |
paulinashakirova
pushed a commit
to paulinashakirova/kibana
that referenced
this pull request
Feb 17, 2026
## Summary Fixes elastic#244198 (flaky layer config tests). Fixes elastic#253050 (layer config not scrollable in full lens editor). - Restructured the config panel layout in `editor_frame.tsx` to use a flex container with overflow handling - Extracted inline CSS into `componentStyles` object in `editor_frame.tsx` for consistency across the file - Fixed flaky layer_actions FTR test by improving the logic to make layer tabs visible ### How to test - Open full lens editor and reduce the height of the browser window - Add some dimension configs so the config panel grows beyond the visible area - Check the config panel is scrollable so you can reach the bottom element like the breakdown form - Check it works for single layer charts (no tabs) and multi layer charts (visible tabs) ### FTR tests - Server: `node scripts/functional_tests_server --config x-pack/platform/test/functional/apps/lens/group2/config.ts` - Runner (layer config no longer flaky): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens layer actions tests"` - Runner (scroll test): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens config panel scroll"` ### 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] 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 - [x] 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) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Release notes Fixes config panel scrolling in the Lens editor. Previously, when the config panel content exceeded the available height (e.g., with multiple dimensions or small viewport), users could not scroll to access all configuration options.
Contributor
Flaky Test Runner Stats🎉 All tests passed! - kibana-flaky-test-suite-runner#10775[✅] x-pack/platform/test/functional/apps/lens/group2/config.ts: 25/25 tests passed. |
patrykkopycinski
pushed a commit
to patrykkopycinski/kibana
that referenced
this pull request
Feb 19, 2026
## Summary Fixes elastic#244198 (flaky layer config tests). Fixes elastic#253050 (layer config not scrollable in full lens editor). - Restructured the config panel layout in `editor_frame.tsx` to use a flex container with overflow handling - Extracted inline CSS into `componentStyles` object in `editor_frame.tsx` for consistency across the file - Fixed flaky layer_actions FTR test by improving the logic to make layer tabs visible ### How to test - Open full lens editor and reduce the height of the browser window - Add some dimension configs so the config panel grows beyond the visible area - Check the config panel is scrollable so you can reach the bottom element like the breakdown form - Check it works for single layer charts (no tabs) and multi layer charts (visible tabs) ### FTR tests - Server: `node scripts/functional_tests_server --config x-pack/platform/test/functional/apps/lens/group2/config.ts` - Runner (layer config no longer flaky): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens layer actions tests"` - Runner (scroll test): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens config panel scroll"` ### 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] 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 - [x] 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) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Release notes Fixes config panel scrolling in the Lens editor. Previously, when the config panel content exceeded the available height (e.g., with multiple dimensions or small viewport), users could not scroll to access all configuration options.
ersin-erdal
pushed a commit
to ersin-erdal/kibana
that referenced
this pull request
Feb 19, 2026
## Summary Fixes elastic#244198 (flaky layer config tests). Fixes elastic#253050 (layer config not scrollable in full lens editor). - Restructured the config panel layout in `editor_frame.tsx` to use a flex container with overflow handling - Extracted inline CSS into `componentStyles` object in `editor_frame.tsx` for consistency across the file - Fixed flaky layer_actions FTR test by improving the logic to make layer tabs visible ### How to test - Open full lens editor and reduce the height of the browser window - Add some dimension configs so the config panel grows beyond the visible area - Check the config panel is scrollable so you can reach the bottom element like the breakdown form - Check it works for single layer charts (no tabs) and multi layer charts (visible tabs) ### FTR tests - Server: `node scripts/functional_tests_server --config x-pack/platform/test/functional/apps/lens/group2/config.ts` - Runner (layer config no longer flaky): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens layer actions tests"` - Runner (scroll test): `node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens config panel scroll"` ### 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] 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 - [x] 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) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Release notes Fixes config panel scrolling in the Lens editor. Previously, when the config panel content exceeded the available height (e.g., with multiple dimensions or small viewport), users could not scroll to access all configuration options.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #244198 (flaky layer config tests). Fixes #253050 (layer config not scrollable in full lens editor).
editor_frame.tsxto use a flex container with overflow handlingcomponentStylesobject ineditor_frame.tsxfor consistency across the fileHow to test
FTR tests
node scripts/functional_tests_server --config x-pack/platform/test/functional/apps/lens/group2/config.tsnode scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens layer actions tests"node scripts/functional_test_runner --config x-pack/platform/test/functional/apps/lens/group2/config.ts --grep "lens config panel scroll"Checklist
release_note:breakinglabel should be applied in these situations.release_note:*label is applied per the guidelinesbackport:*labels.Release notes
Fixes config panel scrolling in the Lens editor. Previously, when the config panel content exceeded the available height (e.g., with multiple dimensions or small viewport), users could not scroll to access all configuration options.