From 3cae35971094fb05bb45969e76d69560e98bf79c Mon Sep 17 00:00:00 2001
From: Ewa <devnook@gmail.com>
Date: Tue, 2 Nov 2021 12:04:22 +0100
Subject: [PATCH] Measure page fixes (#6634)

* Fix measure page CLS

* disable dark theme in lighthouse-viewer
---
 src/lib/components/LighthouseViewer/index.js | 3 +++
 src/scss/pages/_measure.scss                 | 4 ++++
 src/site/content/en/measure-psi/index.njk    | 2 +-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/LighthouseViewer/index.js b/src/lib/components/LighthouseViewer/index.js
index cc93cd69745..535097b1566 100644
--- 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
index bfd42aa6a89..a2ae4feb390 100644
--- 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
index 0a3377c1abb..5ae5fe37ad4 100644
--- 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>