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>' +