Skip to content

Commit

Permalink
[Search] [Playground] Re-enable Full width view + fix scrollbar issue (
Browse files Browse the repository at this point in the history
…#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="https://github.com/elastic/kibana/assets/49480/1eb7bc88-f4a4-4544-8e69-a3621e365966">

**With fix**
<img width="1562" alt="image"
src="https://github.com/elastic/kibana/assets/49480/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 <[email protected]>
  • Loading branch information
joemcelroy and kibanamachine authored May 13, 2024
1 parent 5fdcb3f commit e61faa6
Showing 1 changed file with 6 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit e61faa6

Please sign in to comment.