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.

Sign up for GitHub

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

[Logs UI] Limit the height of the "view in context" container #83178

Merged
merged 5 commits into from
Nov 26, 2020
+1 −0
Merged

[Logs UI] Limit the height of the "view in context" container #83178

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
017912f
Limit the height of the "view in context" container
afgomez Nov 11, 2020
33e7fba
Merge branch 'master' into 83063-view-in-context-clipping
kibanamachine Nov 18, 2020
0df1223
Merge branch 'master' into 83063-view-in-context-clipping
kibanamachine Nov 18, 2020
615384c
Merge branch 'master' into 83063-view-in-context-clipping
kibanamachine Nov 23, 2020
304c8e3
Merge branch 'master' into 83063-view-in-context-clipping
kibanamachine Nov 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const LogInContextWrapper = euiStyled.div<{ width: number | string; height: numb
padding: 16px;
width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
max-height: 75vh; // Same as EuiModal
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to hard-code it like this even though there's a parameterized height prop? According to the CSS spec "max-height overrides height", so I wonder if we could somehow unify the treatment of both.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the CSS spec "max-height overrides height"

I'm relying on this :) I want the content of the modal to "take as much height available (the height) without making it bigger than its container (the max-height, which replicates the value in the EuiModal).

The problem is that we have no control on the height of the modal itself. The content can be as tall as we want, but the modal will clip it no matter what *.

*: in Chrome at least. In Firefox it worked correctly, but I'm not sure what browser is breaking the standards here.

`;

const LogEntryContext: React.FC<{ context: LogEntry['context'] }> = ({ context }) => {
Expand Down