Rollup merge of #99086 - GuillaumeGomez:search-result-crate-filter-dropdown, r=notriddle

Fix display of search result crate filter dropdown

In case a crate name is too long, the `<select>` completely overflows its parent. Another problem is that there is left margin on the `select` which break the alignment. You can see both issues here:

![Screenshot from 2022-07-09 15-31-12](https://user-images.githubusercontent.com/3050060/178108959-0eb5af19-ec60-4d34-a2fd-c27147683c78.png)

And with the fix:

![Screenshot from 2022-07-09 15-33-37](https://user-images.githubusercontent.com/3050060/178108980-71030a92-84ee-4ee5-98e3-f97d03a6fbaf.png)

cc `@jsha`
r? `@notriddle`

2 files changed, 30 insertions, 1 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 294b0a1e9c9..5c7b56ec140 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -924,7 +924,6 @@ table,
 #crate-search {
 	min-width: 115px;
 	margin-top: 5px;
-	margin-left: 0.25em;
 	padding-left: 0.3125em;
 	padding-right: 23px;
 	border: 1px solid;
@@ -941,6 +940,8 @@ table,
 	background-size: 20px;
 	background-position: calc(100% - 1px) 56%;
 	background-image: /* AUTOREPLACE: */url("down-arrow.svg");
+	max-width: 100%;
+	text-overflow: ellipsis;
 }
 .search-container {
 	margin-top: 4px;
diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml
index ff792eced70..b31905a126a 100644
--- a/src/test/rustdoc-gui/search-result-display.goml
+++ b/src/test/rustdoc-gui/search-result-display.goml
@@ -10,3 +10,31 @@ 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-css: (".search-results div.desc", {"width": "570px"})
+
+// 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>`.
+size: (900, 900)
+
+// First we check the current width and position.
+assert-css: ("#crate-search", {"width": "222px"})
+compare-elements-position-near: (
+    "#crate-search",
+    "#search-settings .search-results-title",
+    {"y": 5},
+)
+
+// Then we update the text of one of the `<option>`.
+text: (
+    "#crate-search option",
+    "sdjfaksdjfaksjdbfkadsbfkjsadbfkdsbkfbsadkjfbkdsabfkadsfkjdsafa",
+)
+
+// Then we compare again.
+assert-css: ("#crate-search", {"width": "640px"})
+compare-elements-position-near-false: (
+    "#crate-search",
+    "#search-settings .search-results-title",
+    {"y": 5},
+)
+// And we check that the `<select>` isn't bigger than its container.
+assert-css: ("#search", {"width": "640px"})