[8.14] [Search] [Playground] Re-enable Full width view + fix scrollba…

…r issue (#183213) (#183253)

# Backport

This will backport the following commits from `main` to `8.14`:
- [[Search] [Playground] Re-enable Full width view + fix scrollbar issue
(#183213)](#183213)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Joe
McElroy","email":"joseph.mcelroy@elastic.co"},"sourceCommit":{"committedDate":"2024-05-13T10:11:52Z","message":"[Search]
[Playground] Re-enable Full width view + fix scrollbar issue
(#183213)\n\n## Summary\r\n\r\nFixes two issues:\r\n- the view should be
full width, so removing restrictWidth option\r\n- in serverless, the
content view was scrollable, even when the vertical\r\ncontent did not
exceed the screen.\r\n\r\nOn scrollbar fix:\r\n- grow adds a
`min-block-size: max($minHeight, 100vh)`. minHeight is by\r\ndefault
460px. 100vh which doesn't take into account the header, adding\r\na
scrollbar with extra size from header. A fix ive seen other
solutions\r\ndo is either specify 0 in minHeight (which omits the
block-size css\r\nstyle which is a side-effect) or switch off
grow\r\n(`min-block-size:$minHeight`). I've opted for grow=false as our
children\r\ncomponents manage the height.\r\n\r\n**Without fix**\r\n<img
width=\"1789\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/49480/1eb7bc88-f4a4-4544-8e69-a3621e365966\">\r\n\r\n**With
fix**\r\n<img width=\"1562\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/49480/5569d3be-fda3-48f9-bb60-3cb8af90469d\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n-
[x] Tested in both serverless and stateful\r\n\r\n### For
maintainers\r\n\r\n- [ ] This was checked for breaking API changes and
was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"e61faa64bae3dbbdf555621ead7a0e2274a09b86","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:EnterpriseSearch","v8.14.0","v8.15.0"],"title":"[Search]
[Playground] Re-enable Full width view + fix scrollbar
issue","number":183213,"url":"https://github.com/elastic/kibana/pull/183213","mergeCommit":{"message":"[Search]
[Playground] Re-enable Full width view + fix scrollbar issue
(#183213)\n\n## Summary\r\n\r\nFixes two issues:\r\n- the view should be
full width, so removing restrictWidth option\r\n- in serverless, the
content view was scrollable, even when the vertical\r\ncontent did not
exceed the screen.\r\n\r\nOn scrollbar fix:\r\n- grow adds a
`min-block-size: max($minHeight, 100vh)`. minHeight is by\r\ndefault
460px. 100vh which doesn't take into account the header, adding\r\na
scrollbar with extra size from header. A fix ive seen other
solutions\r\ndo is either specify 0 in minHeight (which omits the
block-size css\r\nstyle which is a side-effect) or switch off
grow\r\n(`min-block-size:$minHeight`). I've opted for grow=false as our
children\r\ncomponents manage the height.\r\n\r\n**Without fix**\r\n<img
width=\"1789\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/49480/1eb7bc88-f4a4-4544-8e69-a3621e365966\">\r\n\r\n**With
fix**\r\n<img width=\"1562\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/49480/5569d3be-fda3-48f9-bb60-3cb8af90469d\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n-
[x] Tested in both serverless and stateful\r\n\r\n### For
maintainers\r\n\r\n- [ ] This was checked for breaking API changes and
was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"e61faa64bae3dbbdf555621ead7a0e2274a09b86"}},"sourceBranch":"main","suggestedTargetBranches":["8.14"],"targetPullRequestStates":[{"branch":"8.14","label":"v8.14.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.15.0","branchLabelMappingKey":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/183213","number":183213,"mergeCommit":{"message":"[Search]
[Playground] Re-enable Full width view + fix scrollbar issue
(#183213)\n\n## Summary\r\n\r\nFixes two issues:\r\n- the view should be
full width, so removing restrictWidth option\r\n- in serverless, the
content view was scrollable, even when the vertical\r\ncontent did not
exceed the screen.\r\n\r\nOn scrollbar fix:\r\n- grow adds a
`min-block-size: max($minHeight, 100vh)`. minHeight is by\r\ndefault
460px. 100vh which doesn't take into account the header, adding\r\na
scrollbar with extra size from header. A fix ive seen other
solutions\r\ndo is either specify 0 in minHeight (which omits the
block-size css\r\nstyle which is a side-effect) or switch off
grow\r\n(`min-block-size:$minHeight`). I've opted for grow=false as our
children\r\ncomponents manage the height.\r\n\r\n**Without fix**\r\n<img
width=\"1789\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/49480/1eb7bc88-f4a4-4544-8e69-a3621e365966\">\r\n\r\n**With
fix**\r\n<img width=\"1562\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/49480/5569d3be-fda3-48f9-bb60-3cb8af90469d\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n-
[x] Tested in both serverless and stateful\r\n\r\n### For
maintainers\r\n\r\n- [ ] This was checked for breaking API changes and
was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"e61faa64bae3dbbdf555621ead7a0e2274a09b86"}}]}]
BACKPORT-->

Co-authored-by: Joe McElroy <joseph.mcelroy@elastic.co>

x-pack/plugins/search_playground/public/chat_playground_overview.tsx

@@ -22,7 +22,12 @@ export const ChatPlaygroundOverview: React.FC = () => {
         indices: [],
       }}
     >
-      <EuiPageTemplate offset={0} grow restrictWidth data-test-subj="svlPlaygroundPage">
+      <EuiPageTemplate
+        offset={0}
+        restrictWidth={false}
+        data-test-subj="svlPlaygroundPage"
+        grow={false}
+      >
         <EuiPageTemplate.Header
           pageTitle={
             <EuiFlexGroup>