Optimized content to be more vertical for resizing consistancy#37120
Conversation
igoristic
added
bug
|
Pinging @elastic/stack-monitoring |
|
cc @elastic/kibana-design |
💔 Build Failed |
💚 Build Succeeded |
There was a problem hiding this comment.
@igoristic Visually, this looks nice as a vertically stacked set!
I'm not sure how far down you would like to go, but at 768px this still breaks down a bit. To alleviate that, I would recommend decreasing the heading font size on smaller screens. You could do this through a new custom CSS class and use the EUI responsive helpers to apply the smaller text size: https://elastic.github.io/eui/#/utilities/responsive
Also, there is an EUI SASS mixin (euiTextTruncate) for truncating text that you might consider using in place of noWrapStyle. However, it may truncate the arrow icon which seems critical here :)
768px screenshot - Disk free space overlapping Shards
|
@ryankeairns I made changes based on feedback, but couldn't add I also didn't have much luck with |
ryankeairns
left a comment
ryankeairns
left a comment
There was a problem hiding this comment.
A couple of minor change requests. Other than that, the simple re-ordering of columns and decreasing the font sizes has produced the desired outcome. Thanks!
| } | ||
| .monSummaryStatusNoWrap { | ||
| margin-left: 12px; | ||
| margin-right: 12px; |
There was a problem hiding this comment.
These two 12px settings should be replaced with EUI size variables. You can find all the available size variables here https://github.com/elastic/eui/blob/master/src/global_styling/variables/_size.scss , but for 12px you would use $euiSizeM
| } | ||
|
|
||
| .euiFlexItem { | ||
| margin: 8px; |
There was a problem hiding this comment.
Similarly, you can use $euiSizeS instead of 8px here.
💔 Build Failed |
ryankeairns
left a comment
ryankeairns
left a comment
There was a problem hiding this comment.
👍 LGTM. Thanks for the updates Igor!
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
…ic#37120) * Optimized content to be more vertical for resizing consistancy * Fixed snapshots * Feedback changes * Update _summary_status.scss * Fixed column order for testing
|
Backport: |
… (#38058) * Optimized content to be more vertical for resizing consistancy * Fixed snapshots * Feedback changes * Update _summary_status.scss * Fixed column order for testing
…ic#37120) * Optimized content to be more vertical for resizing consistancy * Fixed snapshots * Feedback changes * Update _summary_status.scss * Fixed column order for testing
4 participants
Summary
Resolves #33614
The sizing discrepancy was mostly in
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js(Elastic Search > Nodes table) due to the way<MetricCell>component was set up.I made the content more vertically aligned so it's optimized for width resizing. Also, added no wrapping on the cell's main value for height constancy
This is what it looks like at 1000px:
Checklist