Enterprise-ng: Incorrect application menu height when adding 'soho-searchfield-wrapper' to menu

[bthharper]

Adding a search field to an application menu causes the containing div to be incorrectly sized, specifically off the bottom of the screen. This is noticeable as the branding icon is displayed off the bottom of the screen.

Removing the search field fixes the issue.

<nav soho-application-menu class="is-pesonalizable" [filterable]="true" [openOnLarge]="true" [dismissOnClickMobile]="true">
  <div soho-searchfield-wrapper>
    <label class="audible" for="application-menu-searchfield">Search</label>
    <input soho-searchfield id="application-menu-searchfield" [clearable]=true />
  </div>
  <application-menu-demo></application-menu-demo>
</nav>

The issue can be worked around by setting:

.application-menu .accordion {
  margin-bottom: calc(-2rem - 76px);
}

However, the application menu should take into account the presence of the search box.

[tmcconechy]

Is this maybe something we should fix in https://github.com/infor-design/enterprise ? Maybe we need to make an example with a lot of top level items and see if we run into the same thing?

[bthharper]

I was not sure if it was caused by the way angular organises the components / elements. You don't need much content to make this happen. I think adding the application menu to the quickstart would show the issue. I am getting the problem on all our apps.