Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Discover] Flyout in Fullscreen mode needs to be full-height #108681

Closed
snide opened this issue Aug 16, 2021 · 6 comments · Fixed by elastic/eui#5054
Closed

[Discover] Flyout in Fullscreen mode needs to be full-height #108681

snide opened this issue Aug 16, 2021 · 6 comments · Fixed by elastic/eui#5054
Labels
bug Fixes for quality problems that affect the customer experience Feature:Discover Discover Application impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@snide
Copy link
Contributor

snide commented Aug 16, 2021

Discover's data grid when in full screen mode does not account for the header being missing when the flyout for each row is invoked.

image

@snide snide added bug Fixes for quality problems that affect the customer experience Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Aug 16, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-design (Team:Kibana-Design)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@timroes timroes added the Feature:Discover Discover Application label Aug 16, 2021
@timroes timroes added the impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. label Aug 17, 2021
@MichaelMarcialis
Copy link
Contributor

@snide: I took a quick peek at this, and I believe this issue may be caused by the EUI mixin euiHeaderAffordForFixed in src/global_styling/mixins/_header.scss. This EUI mixin is being called in Kibana on line 39 of src/core/public/rendering/_base.scss.

Currently the mixin is applying a top offset to account for the headers, but doesn't currently account for situations where the EuiDataGrid component is in full screen mode. It seems like EuiDataGrid applies a body class of euiDataGrid__restrictBody when in full screen mode. As such, I imagine an easy fix would be to add a :not(. euiDataGrid__restrictBody) selector to the styles in question.

Do you come to the same conclusion? If so, I'd be happy to cut a PR with those changes to the EUI mixin.

@ryankeairns ryankeairns changed the title Discover Flyout in Fullscreen mode needs to be full-height [Discover] Flyout in Fullscreen mode needs to be full-height Aug 18, 2021
@ryankeairns
Copy link
Contributor

Lazy Ryan wonders how we handle this in Maps. They don't use a flyout but they do have a sidebar and full screen mode.

Also, I've added this to the DataGrid errata issue as something to address before setting as default.

@snide
Copy link
Contributor Author

snide commented Aug 18, 2021

@MichaelMarcialis Yep. I think it's a good idea to solve it globally. If you do end up taking it on, make sure to close out #108896 which is essentially the same issue, but in security. My guess is applying the selector broadly based upon the body will work.

@MichaelMarcialis
Copy link
Contributor

@MichaelMarcialis Yep. I think it's a good idea to solve it globally. If you do end up taking it on, make sure to close out #108896 which is essentially the same issue, but in security. My guess is applying the selector broadly based upon the body will work.

Sounds good. Will cut a PR for this today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:Discover Discover Application impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
5 participants