Ceph » mgr » Dashboard

The banners, e.g. to notify users to update their password or the enable the telemetry plugin, have a hardcoded fixed height of 37.6px. This makes it impossible to display more than one line in them. Additionally the calculation of the position of ALL components rendered in the navigation component is calculated by the component itself via CSS. This is a not so good approach because actually every component should be repsonsible for itself to calculate and render in the correct height/size. Using a flex layout, e.g. by using @angular/flex-layout component, will fix that. Finally it requires additinal code changes in the navigation component CSS to add another banner; adding <cd-foo></cd-foo> to the navigation HTML should be enough, the rest is done by the flex-layout automatically.

https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss#L111
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss#L262
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts#L103
https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts#L63

As you can see on https://ng-bootstrap.github.io/#/components/alert/examples, the banner automatically increases the height when the view gets to small to display the message in one line. This behaviour is prevented by the current implementation of the navigation component.

Additional references:
https://github.com/angular/flex-layout