[BUG] Docked navigation impacts visibility of bottom bar component

[KrooshalUX]

Describe the bug

When the main application navigation is docked, it overlays the bottom bar that appears after any update action has been taken.

To Reproduce
Steps to reproduce the behavior:

1. With the main application navigation docked, go to Stack Management > Advanced Settings (playground: https://playground.opensearch.org/app/management/opensearch-dashboards/settings)
2. Make any change to any of the inputs
3. A bottom bar will appear displaying Save and Cancel options
4. Un-dock the main application navigation to see the hidden part of the bottom bar - a counter that displays the number of unsaved changes

Expected behavior
When the main application navigation is docked, bottom bar should only span the contents of the page, not the entire browser width.

OpenSearch Version
Playground

Dashboards Version
Playground

Plugins
What is included in playground

Screenshots
With bottom bar docked:

With bottom bar undocked:

Expected behavior (sample UI, not production):

Host/Environment (please complete the following information):

• OS: MacOS Monterey 12.6.2
• Safari -Version 16.3 (17614.4.6.11.4, 17614)
• Firefox - 102.7.0esr (64-bit)
• Google Chrome Version 109.0.5414.87 (Official Build) (x86_64)

[aoguan1990]

Assign this bug to @joshuarrrr to look into it.

[joshuarrrr]

Yikes! Good spot Kroosh - I don't usually dock the nav, so probably wouldn't have spotted this. Your solution sounds good - I think it's like just a bit of CSS tweaking needed, so I'm going to label it as a good first issue. We also may want to revisit how robust the EUIBottomBar component is when used at smaller widths, to make sure everything adjusts nicely for longer messages.

This issue will still need some investigation to determine whether it's the docked menu or the bottom bar that's at fault here.

[KrooshalUX]

@joshuarrrr OuiBottomBar / EuiBottomBar should follow this guidance from the docs site:
https://eui.elastic.co/v34.6.0/#/layout/page#showing-a-bottom-bar

"Adding an EuiBottomBar can be tricky to use and account for any side bars. EuiPageTemplate handles this nicely by supplying a bottomBar prop for passing the contents of your bottom bar, and bottomBarProps that extends EuiBottomBar.

It uses the sticky position so that it sticks to the bottom of and remains within the bounds of EuiPageBody. This way it will never overlap the EuiPageSideBar, no matter the screen size. It also means not needing to accommodate for the height of the bar in the body element."

Perhaps its useful to investigate if the implementation here follows that guidance or maybe isnt using EuiPageBody ? I am making note of it for future implementations as recommended by UX team, as we would like to utilize this especially across our longer Create forms to track errors out of view.

[joshuarrrr]

Thanks, that's super helpful context - We'll want to identify where in the app we follow the guidance and where we don't. (My guess is this is a case that doesn't 😁 )

[KrooshalUX]

Is there any chance to get some attention on this issue? It is leading to some confusion when collaborating with other builders on how to use bottom bar.

[SergeyMyssak]

Hello @KrooshalUX, #3978 has been merged with a bugfix, I think we can close this issue

[KrooshalUX]

@SergeyMyssak can you post screenshots or video to show the change ?

[SergeyMyssak]

@SergeyMyssak can you post screenshots or video to show the change ?

@KrooshalUX, the video can be found in #3978, but I will duplicate it here

Screen.Recording.2023-05-04.at.08.12.18.mov

[ashwin-pc]

@KrooshalUX can this issue be closed?

[KrooshalUX]

@ashwin-pc 😲 YES! Yes it can.