Project Side Nav is cut-off at the bottom when there is a header banner #162935
Assignees
Labels
Project:Serverless
Work as part of the Serverless project for its initial release
Team:SharedUX
Team label for AppEx-SharedUX (formerly Global Experience)
Comments
tsullivan
added
Team:SharedUX
5 tasks
tsullivan
added a commit
that referenced
this issue
Aug 11, 2023
## Summary Closes #161889 Closes #162935 This PR gives the correct look and feel to the app menu bar. 1. The bar appears to the right of the side panel 2. The bar has fixed position below the fixed EuiHeader 3. Page content flows after the the bar ### Testing 1. Run `yarn es snapshot` in a terminal pane 2. Run `yarn serverless` in another pane 3. Log into the Kibana UI and check different forms of the menu bar 4. Use the dev-project switcher to test other solution projects 5. Test with a header banner: ``` #!/bin/bash HOST=http://elastic:changeme@localhost:5601 curl -X POST "$HOST/internal/kibana/settings" \ -H 'kbn-xsrf: true' \ -H 'X-Elastic-Internal-Origin: Kibana' \ -H 'Content-Type: application/json' \ -d '{ "changes": { "banners:placement": "top", "banners:textContent": "Prefix. **SIMPLE BANNER MESSAGE CONTENT**. Suffix." } }' ``` Set `banners:placement` to `null` to turn off the header banner. **Known issue:** in some Observability project pages, the app menu bar may appear as an empty div. This is explained in the [serverless project layout documentation](https://docs.elastic.dev/kibana-dev-docs/serverless-project-navigation#header-action-menu): > **Note** The display of the toolbar container is conditional, based on whether there is toolbar content to show. Make sure to pass undefined to setHeaderActionMenu if there is no application content to show. In classic layout, passing an empty span or div element suffices to "clear" the toolbar, but in serverless projects it will cause a large empty container to show below the header. ### Screenshots _Will not be updated past a5222e428814c9d2211f4c14fe160dbea93f3e1b_ | | | |---|---| | **Project layout in Observability app** | https://github.com/elastic/kibana/assets/908371/9fb8f57a-3de9-49e8-9d6d-d10fa83a3c83 | | **Project layout in Observability app w/ header banner** | https://github.com/elastic/kibana/assets/908371/19a0bf68-0df7-4f08-b987-125abe9e5680 | | **Project layout in Security app** | https://github.com/elastic/kibana/assets/908371/af1940fa-9d48-48a4-b675-0b3c8bcffc39 | | **Project layout in Security app w/ header banner** | https://github.com/elastic/kibana/assets/908371/d962952a-1d21-4bb3-8992-cafe4aed82a4 | ### Checklist Delete any items that are not applicable to this PR. - [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] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Cee Chen <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When a header banner is visible, the project side nav is cut off a the very bottom.
The text was updated successfully, but these errors were encountered: