HTML Reporter: Revert "Clip qunit-userAgent to one line" (unreleased)

Follows-up d8c2a3a. This felt like a hacky compromise and doesn't
quite feel right either way. Let's leave flowing as before for now.

What I did add is to expose the version and user agent as data
attributes, to empower other themes and plugins to play with this
and perhaps come up with a better design.

History.md

@@ -32,11 +32,10 @@ QUnit 3.0 Roadmap and feedback: https://github.com/qunitjs/qunit/issues/1498
   * Fix overflow and scrollbar issues. [#1603](https://github.com/qunitjs/qunit/issues/1603)
   * Change `#qunit-banner` from H2 to DIV, to fix WCAG compliance. [#1427](https://github.com/qunitjs/qunit/issues/1427)
   * Change `#qunit-testresult` from P to DIV, to fix HTML serialization. [#1301](https://github.com/qunitjs/qunit/issues/1301)
-  * Change `#qunit-userAgent` to clip on one line until focussed. [d8c2a3ac18](https://github.com/qunitjs/qunit/commit/d8c2a3ac18b35a8d601fd7d863bdcc86ff45c9c8)
   * Change report time in toolbar from milliseconds to seconds. [#1760](https://github.com/qunitjs/qunit/pull/1760)
   * Add `user-select: none;` to "Rerun" link and "runtime" indicator. [6becc199e0](https://github.com/qunitjs/qunit/commit/6becc199e0)
   * Add `running` class to test items. [1551120536](https://github.com/qunitjs/qunit/commit/1551120536f6f572a3bb5656db566f0a1bb217d8)
-  * Remove assertion count from toolbar display, in favor of test count. [#1760](https://github.com/qunitjs/qunit/pull/1760)
+  * Remove assertion count from toolbar, in favor of test count. [#1760](https://github.com/qunitjs/qunit/pull/1760)
 
 ### Fixed
 

src/core/qunit.css

@@ -76,32 +76,8 @@ 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-userAgent:after {
+	content: '; ' attr(data-useragent);
 }
 
 #qunit-banner {

src/core/reporters/HtmlReporter.js

@@ -674,7 +674,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" tabindex="0"><span class="qunit-version-lib">' + escapeText('QUnit ' + version) + ';</span> <span class="qunit-version-client">' + escapeText(navigator.userAgent) + '</span></div>'
+        + '<div id="qunit-userAgent" data-version="' + escapeText(version) + '" data-useragent="' + escapeText(navigator.userAgent) + '">' + escapeText('QUnit ' + version) + '</div>'
       + '</div>'
       + '<div id="qunit-toolbar" role="navigation">'
         + '<div id="qunit-banner"></div>'