report: occupy entire viewport

report/assets/styles.css

@@ -277,6 +277,13 @@
   --sticky-header-buffer: 0;
 }
 
+.lh-max-viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+}
+
 .lh-devtools.lh-root {
   height: 100%;
 }

report/clients/standalone.js

@@ -21,6 +21,7 @@ function __initLighthouseReport__() {
   const lhr = window.__LIGHTHOUSE_JSON__;
 
   const reportRootEl = renderReport(lhr, {
+    occupyEntireViewport: true,
     getStandaloneReportHTML() {
       return document.documentElement.outerHTML;
     },

report/renderer/report-renderer.js

@@ -61,6 +61,10 @@
     this._dom.rootEl.textContent = ''; // Remove previous report.
     this._dom.rootEl.append(this._renderReport(report));
 
+    if (this._opts.occupyEntireViewport) {
+      this._dom.rootEl.classList.add('lh-max-viewport');
+    }
+
     return this._dom.rootEl;
   }
 

report/types/report-renderer.d.ts

@@ -28,6 +28,8 @@ declare module Renderer {
     omitTopbar?: boolean;
     /** Prevent injection of report styles. Set to true if these styles are already included by the environment. */
     omitGlobalStyles?: boolean;
+    /** Ensure the report occupies the entire viewport. This option should be enabled if the report represents the entire page content (i.e. standalone HTML & viewer app) */
+    occupyEntireViewport?: boolean;
     /**
      * Convert report anchor links to a different format.
      * Flow report uses this to convert `#seo` to `#index=0&anchor=seo`.

viewer/app/src/lighthouse-report-viewer.js

@@ -232,7 +232,9 @@ export class LighthouseReportViewer {
     const dom = new DOM(document);
     const renderer = new ReportRenderer(dom);
 
-    renderer.renderReport(json, rootEl);
+    renderer.renderReport(json, rootEl, {
+      occupyEntireViewport: true,
+    });
 
     const features = new ViewerUIFeatures(dom, {
       saveGist: saveGistCallback,