HTML Reporter: Clip qunit-userAgent to one line

In narrow viewports, prioritize vertical space for toolbar and test
results over, say, rendering a long user agent string over three
separate lines.

Within the string, prioritize the end of it where typically the
meaningful versions are.

When focused or tapped, the string is expanded.

src/core/qunit.css

@@ -76,6 +76,34 @@ body {
 	color: #FFF;
 }
 
+#qunit-userAgent {
+	white-space: nowrap;
+	overflow: hidden;
+	display: flex;
+	gap: 7px;
+}
+.qunit-version-client {
+	overflow: hidden;
+	/* prioritize end of the string */
+	display: inline-flex;
+	justify-content: flex-end;
+}
+#qunit-userAgent:focus {
+	white-space: initial;
+	display: block;
+}
+#qunit-userAgent:focus .qunit-version-client {
+	display: inline;
+}
+@media (max-width: 600px) {
+	#qunit-userAgent {
+		cursor: pointer;
+	}
+	#qunit-userAgent:focus {
+		cursor: initial;
+	}
+}
+
 #qunit-banner {
 	--qunit-progress: 0%;
 
@@ -167,7 +195,7 @@ body {
 
 	display: flex;
 	flex-flow: row wrap;
-	gap: 13px;
+	gap: 7px;
 }
 #qunit-modulefilter {
 	flex-grow: 1;

src/core/reporters/HtmlReporter.js

@@ -636,7 +636,7 @@ export default class HtmlReporter {
     this.element.innerHTML =
       '<div id="qunit-header">' +
         '<h1><a href="' + escapeText(this.unfilteredUrl) + '">' + escapeText(document.title) + '</a></h1> ' +
-        '<div id="qunit-userAgent">' + escapeText('QUnit ' + version + '; ' + navigator.userAgent) + '</div>' +
+        '<div id="qunit-userAgent" tabindex="0"><span class="qunit-version-lib">' + escapeText('QUnit ' + version) + ';</span> <span class="qunit-version-client">' + escapeText(navigator.userAgent) + '</span></div>' +
       '</div>' +
       '<div id="qunit-toolbar" role="navigation">' +
         '<div id="qunit-banner"></div>' +