fix banner overlap in dashboard embed and fullscreen mode (#150012)

## Summary

Fix https://github.com/elastic/kibana/issues/116103,
https://github.com/elastic/kibana/issues/149112
Better version of the initial attempt
https://github.com/elastic/kibana/pull/149197


Fixes banner overlap in dashboard embed and fullscreen mode. The fix
follows `chaos`'s suggestion
https://github.com/elastic/kibana/issues/116103#issuecomment-957599532.
The bug root cause is described in
https://github.com/elastic/kibana/issues/116103#issuecomment-953252893
and
https://github.com/elastic/kibana/issues/116103#issuecomment-957369465

To reproduce and test: 

Simple way to reproduce locally (no need for an iframe):

1. Add to  kibana.dev.yml

```
xpack.banners:
  placement: 'top'
  textContent: 'P-System'
  textColor: '#FFFFFF'
  backgroundColor: '#FF0000'
```

2. Enable platinum license trial through Stack Management > Stack >
License Management (banners are not available in basic)

3. Fullscreen: View a dashboard and switch to fullscreen mode

4. Embed mode: Open a dashboard, copy the URL, open that URL in a new
window appending `embed=true` to the URL. e.g.:
`edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?embed=true&_g=()`


fixed fullscreen (no panel title overlap): 

![Screenshot 2023-02-01 at 11 29
23](https://user-images.githubusercontent.com/7784120/216018466-b49ef056-48fd-47d4-a503-bcc17ff87c3e.png)

fixed embed (no controls overlap):

![Screenshot 2023-02-01 at 11 29
39](https://user-images.githubusercontent.com/7784120/216018547-a4735ee2-5306-4ae6-bd25-a79d651691bf.png)
This commit is contained in:
Anton Dosov 2023-02-01 16:55:24 +01:00 committed by GitHub
parent a7cec2200c
commit 30ed57628e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -62,6 +62,8 @@
@include kbnAffordForHeader($kbnHeaderOffset);
&.kbnBody--hasHeaderBanner {
padding-top: $kbnHeaderBannerHeight;
@include kbnAffordForHeader($kbnHeaderOffsetWithBanner);
// Prevents banners from covering full screen data grids