Rollup merge of #85551 - GuillaumeGomez:fix-search-result-overflow, r=jsha

Fix search results display

Fixes https://github.com/rust-lang/rust/issues/85544.

cc `@dns2utf8`

r? `@jsha`

src/librustdoc/html/static/rustdoc.css

@@ -759,25 +759,40 @@ a {
 
 .search-results.active {
 	display: block;
+	/* prevent overhanging tabs from moving the first result */
+	clear: both;
 }
 
-.search-results .desc {
+.search-results .desc > span {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	display: block;
 }
 
-.search-results a {
+.search-results > a {
+	display: block;
+	width: 100%;
 	/* A little margin ensures the browser's outlining of focused links has room to display. */
 	margin-left: 2px;
 	margin-right: 2px;
-	display: block;
+	border-bottom: 1px solid #aaa3;
 }
 
-.result-name {
+.search-results > a > div {
+	display: flex;
+	flex-flow: row wrap;
+}
+
+.search-results .result-name, .search-results div.desc, .search-results .result-description {
 	width: 50%;
-	float: left;
+}
+.search-results .result-name {
+	padding-right: 1em;
+}
+
+.search-results .result-name > span {
+	display: inline-block;
 }
 
 .result-name span.primitive::after {
@@ -1733,6 +1748,18 @@ details.undocumented[open] > summary::before {
 	.search-container > div {
 		width: calc(100% - 32px);
 	}
+
+	/* Display an alternating layout on tablets and phones */
+	.search-results > a {
+		border-bottom: 1px solid #aaa9;
+		padding: 5px 0px;
+	}
+	.search-results .result-name, .search-results div.desc, .search-results .result-description {
+		width: 100%;
+	}
+	.search-results div.desc, .search-results .result-description {
+		padding-left: 2em;
+	}
 }
 
 @media print {

src/librustdoc/html/static/search.js

@@ -994,8 +994,8 @@ window.initSearch = function(rawSearchIndex) {
                            ("<span class=\"alias\"><b>" + item.alias + " </b></span><span " +
                               "class=\"grey\"><i>&nbsp;- see&nbsp;</i></span>") : "") +
                           item.displayPath + "<span class=\"" + type + "\">" +
-                          name + "</span></div><div>" +
+                          name + "</span></div><div class=\"desc\">" +
-                          "<span class=\"desc\">" + item.desc +
+                          "<span>" + item.desc +
                           "&nbsp;</span></div></div></a>";
             });
             output += "</div>";

src/test/rustdoc-gui/search-result-display.goml

@@ -0,0 +1,12 @@
+goto: file://|DOC_PATH|/test_docs/index.html
+size: (900, 1000)
+write: (".search-input", "test")
+// Waiting for the search results to appear...
+wait-for: "#titles"
+// The width is returned by "getComputedStyle" which returns the exact number instead of the
+// CSS rule which is "50%"...
+assert: (".search-results div.desc", {"width": "320px"})
+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.
+assert: (".search-results div.desc", {"width": "570px"})