Measure page fixes (#6634)

* Fix measure page CLS * disable dark theme in lighthouse-viewer
GoogleChrome · Nov 2, 2021 · 3cae359 · 3cae359
1 parent 66a786d
commit 3cae359
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/lib/components/LighthouseViewer/index.js b/src/lib/components/LighthouseViewer/index.js
@@ -50,6 +50,8 @@ class LighthouseViewer extends BaseStateElement {
     renderer.renderReport(lighthouseReport, container);
     const features = new ReportUIFeatures(dom);
     features.initFeatures(lighthouseReport);
+    // Force remove dark theme support untill whole of web.dev supports it.
+    this.varsEl.classList.remove('dark');
   };
 
   onStateChanged() {
@@ -63,6 +65,7 @@ class LighthouseViewer extends BaseStateElement {
 
   firstUpdated() {
     this.container = this.querySelector('.lighthouse-viewer');
+    this.varsEl = this.querySelector('.lh-vars');
   }
 }
 

diff --git a/src/scss/pages/_measure.scss b/src/scss/pages/_measure.scss
@@ -31,6 +31,10 @@
   }
 }
 
+.measure-tool {
+  min-height: 280px;
+}
+
 .measure-steps {
   --cluster-vertical-alignment: top;
 

diff --git a/src/site/content/en/measure-psi/index.njk b/src/site/content/en/measure-psi/index.njk
@@ -24,7 +24,7 @@ noindex: true
   </header>
 </section>
 
-<section class="bg-mid-bg">
+<section class="bg-mid-bg measure-tool">
   <div class="wrapper region" data-size="narrow">
     <web-url-chooser-container should-run-psi></web-url-chooser-container>
     <web-lighthouse-viewer></web-lighthouse-viewer>