Skip to content

[Search] fix: move app menu z index down#224708

Merged
TattdCodeMonkey merged 1 commit intoelastic:mainfrom
TattdCodeMonkey:search/bug-console-endpoints-header
Jun 20, 2025
Merged

[Search] fix: move app menu z index down#224708
TattdCodeMonkey merged 1 commit intoelastic:mainfrom
TattdCodeMonkey:search/bug-console-endpoints-header

Conversation

@TattdCodeMonkey
Copy link
Contributor

@TattdCodeMonkey TattdCodeMonkey commented Jun 20, 2025

Summary

Currently the app menu z index is header - 1, which makes it below the header and standard flyout, but it is then above the embeddable dev console which is level1 - 2 to not conflict with flyouts.

Updating the AppMenuBar to be header - 10 (990) here to give more flexibility for other layers specifically the embeddable dev console to have a z index between the AppMenuBar and flyouts.

This is fixing an issue seen when using the search solution navigation where the header actions are put into an additional header that is not accounted for in the fixed header offset. Which then causes the embedded dev console to render below the AppMenu bar and be more difficult to close:

image

With this change the AppMenuBar is moved down to allow the embedded dev console room to open above. The other option would be to introduce a CSS variable for the height of the AppMenuBar when it's rendered and update the embedded dev console to account for that height as well as the --euiFixedHeadersOffset with it's total maximum height.

After fix:
image

Checklist

  • Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  • Documentation was added for features that require explanation or tutorials
  • Unit or functional tests 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
  • 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 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

Release note

Adjusted z-index of app menu header to not conflict with the portable dev console.

Currently the app menu z index is header - 1, which makes it below the
header and standard flyout, but it is then above the embeddable dev
console which is level1 - 2 to not conflict with flyouts.

Updating the AppMenuBar to be header - 10 (990) here to give more
flexibility for other layers specifically the embeddable dev console to
have a z index between the AppMenuBar and flyouts.
Copy link
Contributor

@Dosant Dosant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@TattdCodeMonkey TattdCodeMonkey enabled auto-merge (squash) June 20, 2025 15:17
@TattdCodeMonkey TattdCodeMonkey merged commit f72bf85 into elastic:main Jun 20, 2025
22 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.19, 9.0

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

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
core 457.5KB 457.5KB +1.0B
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jun 20, 2025
## Summary

Currently the app menu z index is header - 1, which makes it below the
header and standard flyout, but it is then above the embeddable dev
console which is level1 - 2 to not conflict with flyouts.

Updating the AppMenuBar to be header - 10 (990) here to give more
flexibility for other layers specifically the embeddable dev console to
have a z index between the AppMenuBar and flyouts.

This is fixing an issue seen when using the search solution navigation
where the header actions are put into an additional header that is not
accounted for in the fixed header offset. Which then causes the embedded
dev console to render below the AppMenu bar and be more difficult to
close:

![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)

With this change the `AppMenuBar` is moved down to allow the embedded
dev console room to open above. The other option would be to introduce a
CSS variable for the height of the `AppMenuBar` when it's rendered and
update the embedded dev console to account for that height as well as
the `--euiFixedHeadersOffset` with it's total maximum height.

After fix:

![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)

### Checklist

- [ ] 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)

(cherry picked from commit f72bf85)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jun 20, 2025
## Summary

Currently the app menu z index is header - 1, which makes it below the
header and standard flyout, but it is then above the embeddable dev
console which is level1 - 2 to not conflict with flyouts.

Updating the AppMenuBar to be header - 10 (990) here to give more
flexibility for other layers specifically the embeddable dev console to
have a z index between the AppMenuBar and flyouts.

This is fixing an issue seen when using the search solution navigation
where the header actions are put into an additional header that is not
accounted for in the fixed header offset. Which then causes the embedded
dev console to render below the AppMenu bar and be more difficult to
close:

![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)

With this change the `AppMenuBar` is moved down to allow the embedded
dev console room to open above. The other option would be to introduce a
CSS variable for the height of the `AppMenuBar` when it's rendered and
update the embedded dev console to account for that height as well as
the `--euiFixedHeadersOffset` with it's total maximum height.

After fix:

![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)

### Checklist

- [ ] 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)

(cherry picked from commit f72bf85)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.19
9.0

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

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Jun 20, 2025
# Backport

This will backport the following commits from `main` to `9.0`:
- [[Search] fix: move app menu z index down
(#224708)](#224708)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Rodney
Norris","email":"rodney.norris@elastic.co"},"sourceCommit":{"committedDate":"2025-06-20T16:08:29Z","message":"[Search]
fix: move app menu z index down (#224708)\n\n## Summary\n\nCurrently the
app menu z index is header - 1, which makes it below the\nheader and
standard flyout, but it is then above the embeddable dev\nconsole which
is level1 - 2 to not conflict with flyouts.\n\nUpdating the AppMenuBar
to be header - 10 (990) here to give more\nflexibility for other layers
specifically the embeddable dev console to\nhave a z index between the
AppMenuBar and flyouts.\n\nThis is fixing an issue seen when using the
search solution navigation\nwhere the header actions are put into an
additional header that is not\naccounted for in the fixed header offset.
Which then causes the embedded\ndev console to render below the AppMenu
bar and be more difficult
to\nclose:\n\n\n![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)\n\nWith
this change the `AppMenuBar` is moved down to allow the embedded\ndev
console room to open above. The other option would be to introduce
a\nCSS variable for the height of the `AppMenuBar` when it's rendered
and\nupdate the embedded dev console to account for that height as well
as\nthe `--euiFixedHeadersOffset` with it's total maximum
height.\n\nAfter
fix:\n\n![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)\n\n###
Checklist\n\n- [ ] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] 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- [ ] 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)","sha":"f72bf857e70ca0d1c507351d2559e2c38b2f246c","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:Search","backport:version","v9.1.0","v8.19.0"],"title":"[Search]
fix: move app menu z index
down","number":224708,"url":"https://github.com/elastic/kibana/pull/224708","mergeCommit":{"message":"[Search]
fix: move app menu z index down (#224708)\n\n## Summary\n\nCurrently the
app menu z index is header - 1, which makes it below the\nheader and
standard flyout, but it is then above the embeddable dev\nconsole which
is level1 - 2 to not conflict with flyouts.\n\nUpdating the AppMenuBar
to be header - 10 (990) here to give more\nflexibility for other layers
specifically the embeddable dev console to\nhave a z index between the
AppMenuBar and flyouts.\n\nThis is fixing an issue seen when using the
search solution navigation\nwhere the header actions are put into an
additional header that is not\naccounted for in the fixed header offset.
Which then causes the embedded\ndev console to render below the AppMenu
bar and be more difficult
to\nclose:\n\n\n![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)\n\nWith
this change the `AppMenuBar` is moved down to allow the embedded\ndev
console room to open above. The other option would be to introduce
a\nCSS variable for the height of the `AppMenuBar` when it's rendered
and\nupdate the embedded dev console to account for that height as well
as\nthe `--euiFixedHeadersOffset` with it's total maximum
height.\n\nAfter
fix:\n\n![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)\n\n###
Checklist\n\n- [ ] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] 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- [ ] 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)","sha":"f72bf857e70ca0d1c507351d2559e2c38b2f246c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.19"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/224708","number":224708,"mergeCommit":{"message":"[Search]
fix: move app menu z index down (#224708)\n\n## Summary\n\nCurrently the
app menu z index is header - 1, which makes it below the\nheader and
standard flyout, but it is then above the embeddable dev\nconsole which
is level1 - 2 to not conflict with flyouts.\n\nUpdating the AppMenuBar
to be header - 10 (990) here to give more\nflexibility for other layers
specifically the embeddable dev console to\nhave a z index between the
AppMenuBar and flyouts.\n\nThis is fixing an issue seen when using the
search solution navigation\nwhere the header actions are put into an
additional header that is not\naccounted for in the fixed header offset.
Which then causes the embedded\ndev console to render below the AppMenu
bar and be more difficult
to\nclose:\n\n\n![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)\n\nWith
this change the `AppMenuBar` is moved down to allow the embedded\ndev
console room to open above. The other option would be to introduce
a\nCSS variable for the height of the `AppMenuBar` when it's rendered
and\nupdate the embedded dev console to account for that height as well
as\nthe `--euiFixedHeadersOffset` with it's total maximum
height.\n\nAfter
fix:\n\n![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)\n\n###
Checklist\n\n- [ ] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] 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- [ ] 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)","sha":"f72bf857e70ca0d1c507351d2559e2c38b2f246c"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Rodney Norris <rodney.norris@elastic.co>
kibanamachine added a commit that referenced this pull request Jun 20, 2025
# Backport

This will backport the following commits from `main` to `8.19`:
- [[Search] fix: move app menu z index down
(#224708)](#224708)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Rodney
Norris","email":"rodney.norris@elastic.co"},"sourceCommit":{"committedDate":"2025-06-20T16:08:29Z","message":"[Search]
fix: move app menu z index down (#224708)\n\n## Summary\n\nCurrently the
app menu z index is header - 1, which makes it below the\nheader and
standard flyout, but it is then above the embeddable dev\nconsole which
is level1 - 2 to not conflict with flyouts.\n\nUpdating the AppMenuBar
to be header - 10 (990) here to give more\nflexibility for other layers
specifically the embeddable dev console to\nhave a z index between the
AppMenuBar and flyouts.\n\nThis is fixing an issue seen when using the
search solution navigation\nwhere the header actions are put into an
additional header that is not\naccounted for in the fixed header offset.
Which then causes the embedded\ndev console to render below the AppMenu
bar and be more difficult
to\nclose:\n\n\n![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)\n\nWith
this change the `AppMenuBar` is moved down to allow the embedded\ndev
console room to open above. The other option would be to introduce
a\nCSS variable for the height of the `AppMenuBar` when it's rendered
and\nupdate the embedded dev console to account for that height as well
as\nthe `--euiFixedHeadersOffset` with it's total maximum
height.\n\nAfter
fix:\n\n![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)\n\n###
Checklist\n\n- [ ] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] 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- [ ] 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)","sha":"f72bf857e70ca0d1c507351d2559e2c38b2f246c","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:Search","backport:version","v9.1.0","v8.19.0"],"title":"[Search]
fix: move app menu z index
down","number":224708,"url":"https://github.com/elastic/kibana/pull/224708","mergeCommit":{"message":"[Search]
fix: move app menu z index down (#224708)\n\n## Summary\n\nCurrently the
app menu z index is header - 1, which makes it below the\nheader and
standard flyout, but it is then above the embeddable dev\nconsole which
is level1 - 2 to not conflict with flyouts.\n\nUpdating the AppMenuBar
to be header - 10 (990) here to give more\nflexibility for other layers
specifically the embeddable dev console to\nhave a z index between the
AppMenuBar and flyouts.\n\nThis is fixing an issue seen when using the
search solution navigation\nwhere the header actions are put into an
additional header that is not\naccounted for in the fixed header offset.
Which then causes the embedded\ndev console to render below the AppMenu
bar and be more difficult
to\nclose:\n\n\n![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)\n\nWith
this change the `AppMenuBar` is moved down to allow the embedded\ndev
console room to open above. The other option would be to introduce
a\nCSS variable for the height of the `AppMenuBar` when it's rendered
and\nupdate the embedded dev console to account for that height as well
as\nthe `--euiFixedHeadersOffset` with it's total maximum
height.\n\nAfter
fix:\n\n![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)\n\n###
Checklist\n\n- [ ] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] 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- [ ] 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)","sha":"f72bf857e70ca0d1c507351d2559e2c38b2f246c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.19"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/224708","number":224708,"mergeCommit":{"message":"[Search]
fix: move app menu z index down (#224708)\n\n## Summary\n\nCurrently the
app menu z index is header - 1, which makes it below the\nheader and
standard flyout, but it is then above the embeddable dev\nconsole which
is level1 - 2 to not conflict with flyouts.\n\nUpdating the AppMenuBar
to be header - 10 (990) here to give more\nflexibility for other layers
specifically the embeddable dev console to\nhave a z index between the
AppMenuBar and flyouts.\n\nThis is fixing an issue seen when using the
search solution navigation\nwhere the header actions are put into an
additional header that is not\naccounted for in the fixed header offset.
Which then causes the embedded\ndev console to render below the AppMenu
bar and be more difficult
to\nclose:\n\n\n![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)\n\nWith
this change the `AppMenuBar` is moved down to allow the embedded\ndev
console room to open above. The other option would be to introduce
a\nCSS variable for the height of the `AppMenuBar` when it's rendered
and\nupdate the embedded dev console to account for that height as well
as\nthe `--euiFixedHeadersOffset` with it's total maximum
height.\n\nAfter
fix:\n\n![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)\n\n###
Checklist\n\n- [ ] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] 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- [ ] 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)","sha":"f72bf857e70ca0d1c507351d2559e2c38b2f246c"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Rodney Norris <rodney.norris@elastic.co>
@mistic
Copy link
Contributor

mistic commented Jun 24, 2025

This PR didn't make it into the latest BC for v9.0.3. Updating the labels.

akowalska622 pushed a commit to akowalska622/kibana that referenced this pull request Jun 25, 2025
## Summary

Currently the app menu z index is header - 1, which makes it below the
header and standard flyout, but it is then above the embeddable dev
console which is level1 - 2 to not conflict with flyouts.

Updating the AppMenuBar to be header - 10 (990) here to give more
flexibility for other layers specifically the embeddable dev console to
have a z index between the AppMenuBar and flyouts.

This is fixing an issue seen when using the search solution navigation
where the header actions are put into an additional header that is not
accounted for in the fixed header offset. Which then causes the embedded
dev console to render below the AppMenu bar and be more difficult to
close:


![image](https://github.com/user-attachments/assets/cb57314a-ca84-4998-b7dd-47a8b1808d14)

With this change the `AppMenuBar` is moved down to allow the embedded
dev console room to open above. The other option would be to introduce a
CSS variable for the height of the `AppMenuBar` when it's rendered and
update the embedded dev console to account for that height as well as
the `--euiFixedHeadersOffset` with it's total maximum height.

After fix:

![image](https://github.com/user-attachments/assets/6762eb99-1a7b-4dbf-a5f4-b34363a3bd0e)

### Checklist

- [ ] 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment