[8.6] fix banner overlap in dashboard embed and fullscreen mode (#150012) (#150074)

# Backport

This will backport the following commits from `main` to `8.6`:
- [fix banner overlap in dashboard embed and fullscreen mode
(#150012)](https://github.com/elastic/kibana/pull/150012)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2023-02-01T15:55:24Z","message":"fix
banner overlap in dashboard embed and fullscreen mode (#150012)\n\n##
Summary\r\n\r\nFix
https://github.com/elastic/kibana/issues/116103,\r\nhttps://github.com/elastic/kibana/issues/149112\r\nBetter
version of the initial
attempt\r\nhttps://github.com/elastic/kibana/pull/149197\r\n\r\n\r\nFixes
banner overlap in dashboard embed and fullscreen mode. The
fix\r\nfollows `chaos`'s
suggestion\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-957599532.\r\nThe
bug root cause is described
in\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-953252893\r\nand\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-957369465\r\n\r\nTo
reproduce and test: \r\n\r\nSimple way to reproduce locally (no need for
an iframe):\r\n\r\n1. Add to
kibana.dev.yml\r\n\r\n```\r\nxpack.banners:\r\n placement: 'top'\r\n
textContent: 'P-System'\r\n textColor: '#FFFFFF'\r\n backgroundColor:
'#FF0000'\r\n```\r\n\r\n2. Enable platinum license trial through Stack
Management > Stack >\r\nLicense Management (banners are not available in
basic)\r\n\r\n3. Fullscreen: View a dashboard and switch to fullscreen
mode\r\n\r\n4. Embed mode: Open a dashboard, copy the URL, open that URL
in a new\r\nwindow appending `embed=true` to the URL.
e.g.:\r\n`edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?embed=true&_g=()`\r\n\r\n\r\nfixed
fullscreen (no panel title overlap): \r\n\r\n![Screenshot 2023-02-01 at
11
29\r\n23](https://user-images.githubusercontent.com/7784120/216018466-b49ef056-48fd-47d4-a503-bcc17ff87c3e.png)\r\n\r\nfixed
embed (no controls overlap):\r\n\r\n![Screenshot 2023-02-01 at 11
29\r\n39](https://user-images.githubusercontent.com/7784120/216018547-a4735ee2-5306-4ae6-bd25-a79d651691bf.png)","sha":"30ed57628e00ad20ea0acf2cb603192cfbfb8dd2","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:SharedUX","backport:prev-minor","Feature:Global
Banner","v8.7.0"],"number":150012,"url":"https://github.com/elastic/kibana/pull/150012","mergeCommit":{"message":"fix
banner overlap in dashboard embed and fullscreen mode (#150012)\n\n##
Summary\r\n\r\nFix
https://github.com/elastic/kibana/issues/116103,\r\nhttps://github.com/elastic/kibana/issues/149112\r\nBetter
version of the initial
attempt\r\nhttps://github.com/elastic/kibana/pull/149197\r\n\r\n\r\nFixes
banner overlap in dashboard embed and fullscreen mode. The
fix\r\nfollows `chaos`'s
suggestion\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-957599532.\r\nThe
bug root cause is described
in\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-953252893\r\nand\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-957369465\r\n\r\nTo
reproduce and test: \r\n\r\nSimple way to reproduce locally (no need for
an iframe):\r\n\r\n1. Add to
kibana.dev.yml\r\n\r\n```\r\nxpack.banners:\r\n placement: 'top'\r\n
textContent: 'P-System'\r\n textColor: '#FFFFFF'\r\n backgroundColor:
'#FF0000'\r\n```\r\n\r\n2. Enable platinum license trial through Stack
Management > Stack >\r\nLicense Management (banners are not available in
basic)\r\n\r\n3. Fullscreen: View a dashboard and switch to fullscreen
mode\r\n\r\n4. Embed mode: Open a dashboard, copy the URL, open that URL
in a new\r\nwindow appending `embed=true` to the URL.
e.g.:\r\n`edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?embed=true&_g=()`\r\n\r\n\r\nfixed
fullscreen (no panel title overlap): \r\n\r\n![Screenshot 2023-02-01 at
11
29\r\n23](https://user-images.githubusercontent.com/7784120/216018466-b49ef056-48fd-47d4-a503-bcc17ff87c3e.png)\r\n\r\nfixed
embed (no controls overlap):\r\n\r\n![Screenshot 2023-02-01 at 11
29\r\n39](https://user-images.githubusercontent.com/7784120/216018547-a4735ee2-5306-4ae6-bd25-a79d651691bf.png)","sha":"30ed57628e00ad20ea0acf2cb603192cfbfb8dd2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/150012","number":150012,"mergeCommit":{"message":"fix
banner overlap in dashboard embed and fullscreen mode (#150012)\n\n##
Summary\r\n\r\nFix
https://github.com/elastic/kibana/issues/116103,\r\nhttps://github.com/elastic/kibana/issues/149112\r\nBetter
version of the initial
attempt\r\nhttps://github.com/elastic/kibana/pull/149197\r\n\r\n\r\nFixes
banner overlap in dashboard embed and fullscreen mode. The
fix\r\nfollows `chaos`'s
suggestion\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-957599532.\r\nThe
bug root cause is described
in\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-953252893\r\nand\r\nhttps://github.com/elastic/kibana/issues/116103#issuecomment-957369465\r\n\r\nTo
reproduce and test: \r\n\r\nSimple way to reproduce locally (no need for
an iframe):\r\n\r\n1. Add to
kibana.dev.yml\r\n\r\n```\r\nxpack.banners:\r\n placement: 'top'\r\n
textContent: 'P-System'\r\n textColor: '#FFFFFF'\r\n backgroundColor:
'#FF0000'\r\n```\r\n\r\n2. Enable platinum license trial through Stack
Management > Stack >\r\nLicense Management (banners are not available in
basic)\r\n\r\n3. Fullscreen: View a dashboard and switch to fullscreen
mode\r\n\r\n4. Embed mode: Open a dashboard, copy the URL, open that URL
in a new\r\nwindow appending `embed=true` to the URL.
e.g.:\r\n`edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?embed=true&_g=()`\r\n\r\n\r\nfixed
fullscreen (no panel title overlap): \r\n\r\n![Screenshot 2023-02-01 at
11
29\r\n23](https://user-images.githubusercontent.com/7784120/216018466-b49ef056-48fd-47d4-a503-bcc17ff87c3e.png)\r\n\r\nfixed
embed (no controls overlap):\r\n\r\n![Screenshot 2023-02-01 at 11
29\r\n39](https://user-images.githubusercontent.com/7784120/216018547-a4735ee2-5306-4ae6-bd25-a79d651691bf.png)","sha":"30ed57628e00ad20ea0acf2cb603192cfbfb8dd2"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>

src/core/public/styles/rendering/_base.scss

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