diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 54f6e1ed4d515..7c0dab1c527d1 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -881,31 +881,24 @@ so that we can apply CSS-filters to change the arrow color in themes */
display: block;
}
-.search-results .desc > span {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- display: block;
-}
-
.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;
+ flex: 1;
}
-.search-results .result-name, .search-results div.desc {
- width: 50%;
-}
-.search-results .result-name {
- padding-right: 1em;
+.search-results > a > div.desc {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
}
.search-results a:hover,
@@ -1867,7 +1860,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,10 +1869,7 @@ 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 {
+ .search-results > a > 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 d04ec357c40ac..dd0531c5e70e4 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,16 +1613,13 @@ function initSearch(rawSearchIndex) {
resultName.insertAdjacentHTML(
"beforeend",
item.displayPath + "" + name + extra + "");
- wrapper.appendChild(resultName);
+ link.appendChild(resultName);
const description = document.createElement("div");
description.className = "desc";
- const spanDesc = document.createElement("span");
- spanDesc.insertAdjacentHTML("beforeend", item.desc);
+ description.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-color.goml b/src/test/rustdoc-gui/search-result-color.goml
index 37d7b03a09958..0c3b111907424 100644
--- a/src/test/rustdoc-gui/search-result-color.goml
+++ b/src/test/rustdoc-gui/search-result-color.goml
@@ -67,7 +67,7 @@ reload:
// Waiting for the search results to appear...
wait-for: "#titles"
assert-css: (
- "//*[@class='desc']//*[text()='Just a normal struct.']",
+ "//*[@class='desc'][text()='Just a normal struct.']",
{"color": "rgb(197, 197, 197)"},
)
assert-css: (
@@ -159,7 +159,7 @@ assert-css: (
)
// Checking color and background on hover.
-move-cursor-to: "//*[@class='desc']//*[text()='Just a normal struct.']"
+move-cursor-to: "//*[@class='desc'][text()='Just a normal struct.']"
assert-css: (
"//*[@class='result-name']/*[text()='test_docs::']",
{"color": "rgb(255, 255, 255)"},
@@ -179,7 +179,7 @@ reload:
// Waiting for the search results to appear...
wait-for: "#titles"
assert-css: (
- "//*[@class='desc']//*[text()='Just a normal struct.']",
+ "//*[@class='desc'][text()='Just a normal struct.']",
{"color": "rgb(221, 221, 221)"},
)
assert-css: (
@@ -276,7 +276,7 @@ reload:
// Waiting for the search results to appear...
wait-for: "#titles"
assert-css: (
- "//*[@class='desc']//*[text()='Just a normal struct.']",
+ "//*[@class='desc'][text()='Just a normal struct.']",
{"color": "rgb(0, 0, 0)"},
)
assert-css: (
diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml
index 053bfd8c905d9..b8abd9f906242 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.