Side navigation bar for 2 elements is bigger than it should

[arcanist123]

Describe the bug A clear and concise description of what the bug is.

I have defined a side navigation bar with 2 elements

the line of navigation bar is too long

To reproduce Steps to reproduce the behavior:

1. Create a new angular project
2. install webcomponents
3. set the app with the following content <ui5-shellbar primary-title="Recipes">

4. run the project

Isolated example Please provide an isolated example if possibile, by forking CodeSandbox

Expected behavior The line should not be that long

Screenshots

Context

• UI5 Web Components version 1.0.0-rc.8
• OS/Platform: {windows}
• Browser (if relevant): {chrome}
• Other information: {...}

Affected components (if known) side navigation bar

Log output / Any errors in the console N/A

{...}

[fifoosid]

Hello @arcanist123

By design, the ui5-side-navigation should fill 100% of the height of its parent. The reason for this bug to happen is simple: the parent element of the Side Navigation doesn't have its height set. In order to fix this issue, try setting the height of the parent element.

Note: If the parent element is not DOM element, but Angular component(like app-root), you will have to set a position property as well.