rustdoc: simplify search results CSS and DOM

There is a layout change caused by this commit, but it's subtle. You won't
notice it unless you're looking for it.

3 files changed, 9 insertions, 19 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 54f6e1ed4d5..227d9ac464b 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -889,23 +889,17 @@ so that we can apply CSS-filters to change the arrow color in themes */
 }
 
 .search-results > a {
-	display: block;
+	display: flex;
 	/* A little margin ensures the browser's outlining of focused links has room to display. */
 	margin-left: 2px;
 	margin-right: 2px;
 	border-bottom: 1px solid var(--border-color);
+	gap: 1em;
 }
 
 .search-results > a > div {
-	display: flex;
-	flex-flow: row wrap;
-}
-
-.search-results .result-name, .search-results div.desc {
-	width: 50%;
-}
-.search-results .result-name {
-	padding-right: 1em;
+	flex: 1;
+	overflow: hidden;
 }
 
 .search-results a:hover,
@@ -1867,7 +1861,8 @@ in storage.js
 	}
 
 	/* Display an alternating layout on tablets and phones */
-	.item-table, .item-row, .item-left, .item-right {
+	.item-table, .item-row, .item-left, .item-right,
+	.search-results > a, .search-results > a > div {
 		display: block;
 	}
 
@@ -1875,9 +1870,6 @@ in storage.js
 	.search-results > a {
 		padding: 5px 0px;
 	}
-	.search-results .result-name, .search-results div.desc {
-		width: 100%;
-	}
 	.search-results div.desc, .item-right {
 		padding-left: 2em;
 	}
diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js
index d04ec357c40..ef3c74f5faa 100644
--- a/src/librustdoc/html/static/js/search.js
+++ b/src/librustdoc/html/static/js/search.js
@@ -1593,7 +1593,6 @@ function initSearch(rawSearchIndex) {
                 link.className = "result-" + type;
                 link.href = item.href;
 
-                const wrapper = document.createElement("div");
                 const resultName = document.createElement("div");
                 resultName.className = "result-name";
 
@@ -1614,7 +1613,7 @@ function initSearch(rawSearchIndex) {
                 resultName.insertAdjacentHTML(
                     "beforeend",
                     item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>");
-                wrapper.appendChild(resultName);
+                link.appendChild(resultName);
 
                 const description = document.createElement("div");
                 description.className = "desc";
@@ -1622,8 +1621,7 @@ function initSearch(rawSearchIndex) {
                 spanDesc.insertAdjacentHTML("beforeend", item.desc);
 
                 description.appendChild(spanDesc);
-                wrapper.appendChild(description);
-                link.appendChild(wrapper);
+                link.appendChild(description);
                 output.appendChild(link);
             });
         } else if (query.error === null) {
diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml
index 053bfd8c905..b8abd9f9062 100644
--- a/src/test/rustdoc-gui/search-result-display.goml
+++ b/src/test/rustdoc-gui/search-result-display.goml
@@ -7,7 +7,7 @@ press-key: 'Enter'
 wait-for: "#crate-search"
 // The width is returned by "getComputedStyle" which returns the exact number instead of the
 // CSS rule which is "50%"...
-assert-css: (".search-results div.desc", {"width": "318px"})
+assert-css: (".search-results div.desc", {"width": "310px"})
 size: (600, 100)
 // As counter-intuitive as it may seem, in this width, the width is "100%", which is why
 // when computed it's larger.