mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Search] [Playground] Re-enable Full width view + fix scrollbar issue (#183213)
## Summary Fixes two issues: - the view should be full width, so removing restrictWidth option - in serverless, the content view was scrollable, even when the vertical content did not exceed the screen. On scrollbar fix: - grow adds a `min-block-size: max($minHeight, 100vh)`. minHeight is by default 460px. 100vh which doesn't take into account the header, adding a scrollbar with extra size from header. A fix ive seen other solutions do is either specify 0 in minHeight (which omits the block-size css style which is a side-effect) or switch off grow (`min-block-size:$minHeight`). I've opted for grow=false as our children components manage the height. **Without fix** <img width="1789" alt="image" src="1eb7bc88
-f4a4-4544-8e69-a3621e365966"> **With fix** <img width="1562" alt="image" src="5569d3be
-fda3-48f9-bb60-3cb8af90469d"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) - [x] Tested in both serverless and stateful ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
5fdcb3fed6
commit
e61faa64ba
1 changed files with 6 additions and 1 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue