report: fix scrolling, buttons and gauge word breaks in devtools (#13361)

report/assets/styles.css

@@ -482,9 +482,7 @@
   border-radius: 3px;
   color: var(--link-color);
   background-color: var(--report-background-color);
-  padding: var(--default-padding);
-  font-size: var(--report-font-size-secondary);
-  line-height: var(--report-line-height-secondary);
+  margin: 5px;
 }
 
 .lh-button:first-of-type {
@@ -1334,6 +1332,7 @@
   margin-top: 10px;
   text-align: center;
   color: var(--report-text-color);
+  word-break: keep-all;
 }
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */

report/renderer/topbar-features.js

@@ -270,7 +270,8 @@ export class TopbarFeatures {
       this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
 
       // 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));
       // The 'scroll' handler must be should be on {Element | Document}...
       scrollParent.addEventListener('scroll', () => this._updateStickyHeader());
       // However resizeObserver needs an element, *not* the document.