From d8c2a3ac18b35a8d601fd7d863bdcc86ff45c9c8 Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinkle@fastmail.com>
Date: Mon, 15 Jul 2024 23:18:35 +0100
Subject: [PATCH] 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                 | 30 +++++++++++++++++++++++++++++-
 src/core/reporters/HtmlReporter.js |  2 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/core/qunit.css b/src/core/qunit.css
index 0c49909b8..fbbbb76f1 100644
--- a/src/core/qunit.css
+++ b/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;
diff --git a/src/core/reporters/HtmlReporter.js b/src/core/reporters/HtmlReporter.js
index a06b89ca2..20dba2119 100644
--- a/src/core/reporters/HtmlReporter.js
+++ b/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>' +