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.