report: improve text wrapping (#8820)

lighthouse-core/report/html/report-styles.css

@@ -297,6 +297,23 @@
 }
 
 .lh-container {
+  /*
+  Text wrapping in the report is so much FUN!
+  We have a `word-break: break-word;` globally here to prevent a few common scenarios, namely
+  long non-breakable text (usually URLs) found in:
+    1. The footer
+    2. .lh-node (outerHTML)
+    3. .lh-code
+
+  With that sorted, the next challenge is appropriate column sizing and text wrapping inside our
+  .lh-details tables. Even more fun.
+    * We don't want table headers ("Potential Savings (ms)") to wrap or their column values, but
+    we'd be happy for the URL column to wrap if the URLs are particularly long.
+    * We want the narrow columns to remain narrow, providing the most column width for URL
+    * We don't want the table to extend past 100% width.
+    * Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,
+      but they do not get any overflow:ellipsis treatment.
+  */
   word-break: break-word;
 }
 
@@ -387,7 +404,6 @@
 .lh-node {
   display: block;
   font-family: var(--monospace-font-family);
-  word-break: break-word;
   color: hsl(174, 100%, 27%);
 }
 
@@ -948,7 +964,6 @@
   white-space: normal;
   margin-top: 0;
   font-size: 85%;
-  word-break: break-word;
 }
 
 .lh-warnings {
@@ -1150,7 +1165,8 @@
 }
 .lh-table thead th {
   font-weight: normal;
-  word-wrap: normal;
+  /* See text-wrapping comment on .lh-container. */
+  word-break: normal;
 }
 
 .lh-table tbody tr:nth-child(even) {
@@ -1177,6 +1193,7 @@
 .lh-table-column--ms,
 .lh-table-column--numeric {
   text-align: right;
+  word-break: normal;
 }
 
 
@@ -1186,7 +1203,6 @@
 
 .lh-table-column--url {
   min-width: 250px;
-  white-space: nowrap;
 }
 
 /* Keep columns narrow if they follow the URL column */
@@ -1199,18 +1215,13 @@
   width: 12%;
 }
 
-.lh-text__url {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .lh-text__url:hover {
   text-decoration: underline dotted #999;
   text-decoration-skip-ink: auto;
 }
 
 .lh-text__url > .lh-text, .lh-text__url-host {
-  display: inline-block;
+  display: inline;
 }
 
 .lh-text__url-host {