report: fix scrolling, buttons and gauge word breaks in devtools #13361
Conversation
| margin-top: 10px; | ||
| text-align: center; | ||
| color: var(--report-text-color); | ||
| word-break: keep-all; |
|
Hate to pile on but I noticed one more issue with the view trace button:
Rest of this LGTM |
|
Might just do the trick: .lh-button--trace {
display: flex;
align-items: center;
margin-right: var(--default-padding);
} |
| // Update sticky header visibility and highlight when page scrolls/resizes. | ||
| const scrollParent = this._getScrollParent(this._dom.rootEl); | ||
| const scrollParent = this._getScrollParent( | ||
| this._dom.find('.lh-container', this._dom.rootEl)); |
There was a problem hiding this comment.
FWIW this._getScrollParent(this.stickyHeaderEl) might be more robust against future changes to the scrollable container. Up to you though.
There was a problem hiding this comment.
I've already verified the previous method still works and would prefer to go with that to continue the release today. Am open to someone/you giving this more consideration later.
| padding: var(--default-padding); | ||
| font-size: var(--report-font-size-secondary); | ||
| line-height: var(--report-line-height-secondary); | ||
| margin: 5px; |
There was a problem hiding this comment.
fixes this
margin was important here. Put to 5 instead of the original 10.
fontsize and lineheight seemed to have to effect so I removed.
connorjclark
changed the title
connorjclark
changed the title
paulirish
left a comment
paulirish
left a comment
There was a problem hiding this comment.
thanks. I have a branch that accomadates a few more devtools integration fixes, but this is great. thank you
connorjclark
changed the title
connorjclark
changed the title
4 participants
was changed here https://github.com/GoogleChrome/lighthouse/pull/13277/files#diff-477e6952dbf9d1f7c7ee3d88b8513e97b5305c05e9bb90cb7544c63fa22ddcb1L62 . But this results in the rootEl itself being used in CDT which is not a scrollable container (but .lh-container is in CDT and standalone report)
confirmed working in standalone report and CDT.