Rollup merge of #112937 - camelid:align-typenames, r=notriddle,Guilla…

…umeGomez

rustdoc: Align search results horizontally for easy scanning

The recent PR #110688 added info about an item's kind before its name in
search results. However, because the kind and name are inline with no
alignment, it's now hard to visually scan downward through the search
results, looking at item names. This PR fixes that by horizontally
aligning search results such that there are now two columns of
information.

r? `@GuillaumeGomez`

src/librustdoc/html/static/css/rustdoc.css

@@ -891,8 +891,10 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	color: var(--search-results-grey-color);
 }
 .search-results .result-name .typename {
+	display: inline-block;
 	color: var(--search-results-grey-color);
 	font-size: 0.875rem;
+	width: 6.25rem;
 }
 
 .popover {

src/librustdoc/html/static/js/search.js

@@ -52,9 +52,9 @@ const longItemTypes = [
     "enum variant",
     "macro",
     "primitive type",
-    "associated type",
+    "assoc type",
     "constant",
-    "associated constant",
+    "assoc const",
     "union",
     "foreign type",
     "keyword",

tests/rustdoc-gui/search-result-display.goml

@@ -14,7 +14,8 @@ set-window-size: (600, 100)
 assert-size: (".search-results div.desc", {"width": 566})
 
 // The result set is all on one line.
-assert-css: (".search-results .result-name > span", {"display": "inline"})
+assert-css: (".search-results .result-name > span:not(.typename)", {"display": "inline"})
+assert-css: (".search-results .result-name > span.typename", {"display": "inline-block"})
 
 // Check that the crate filter `<select>` is correctly handled when it goes to next line.
 // To do so we need to update the length of one of its `<option>`.