Auto merge of rust-lang#131002 - steffahn:rustdoc-long-names-fix, r=notriddle

In redesigned rustdoc toolbar: Adjust spacings and sizing to improve behavior with over-long names

Fixes rust-lang#130993.

Some additional adjustments also fix more issues I’ve noticed such as:

* on small screens, opening search made the 3 bottons move down very slightly (because the row with the crate picker got larger, enlarging the whole grid), this is fixed with a `min-height: 60px` on the toolbar
* with long names in the “breadcrumps” area, wrapping was very broken
  * ![Screenshot_20240929_031831](https://github.com/user-attachments/assets/6f46bbb7-004b-4606-bf17-8a6f3289a8f7)
  * fixed:
  * ![Screenshot_20240929_035312](https://github.com/user-attachments/assets/4e2f8dd2-043e-4279-b588-0a72c7533f8e)
* the left grid area has a minimal width (105px); like before, that leaves about enough space for crate names becoming as short as “all cra…”;
    to save even more space, there’s support for a little bit of extra squeezing of the buttons
  * ![Screenshot_20240929_034511](https://github.com/user-attachments/assets/7c6788ee-8ec1-4a38-b341-8d67704f5575)
  * ![Screenshot_20240929_034525](https://github.com/user-attachments/assets/e141756d-37a9-4205-bc4d-235ddd1c0609)
  * ![Screenshot_20240929_034535](https://github.com/user-attachments/assets/526447f3-48b6-47aa-8a60-e5b0d4d055f0)

I’m really not super good with HTML or CSS stuff at all; there seem to be many magical numbers already, I’ve just used `px` values until things look right, I hope that’s okay 🤷‍♂️

r? `@GuillaumeGomez`

cc `@notriddle`

Author: bors

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

@@ -182,17 +182,18 @@ h1, h2, h3, h4 {
 		"main-heading-breadcrumbs main-heading-breadcrumbs"
 		"main-heading-h1 main-heading-toolbar"
 		"main-heading-sub-heading main-heading-toolbar";
-	grid-template-columns: 1fr max-content;
-	grid-template-rows: 25px min-content min-content;
+	grid-template-columns: minmax(105px, 1fr) minmax(0, max-content);
+	grid-template-rows: minmax(25px, min-content) min-content min-content;
 	padding-bottom: 6px;
 	margin-bottom: 11px;
 }
 .rustdoc-breadcrumbs {
 	grid-area: main-heading-breadcrumbs;
-	height: 25px;
 	line-height: 1.25;
 	display: flex;
+	flex-wrap: wrap;
 	align-items: end;
+	padding-top: 5px;
 }
 .rustdoc-breadcrumbs a {
 	padding: 4px 0;
@@ -928,6 +929,7 @@ rustdoc-toolbar {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
+	min-height: 60px;
 }
 
 .docblock code, .docblock-short code,
@@ -1104,17 +1106,17 @@ table,
 .search-results-title + .sub-heading {
 	color: var(--main-color);
 	display: flex;
-	align-items: center;
+	align-items: baseline;
+	white-space: nowrap;
 }
 #crate-search-div {
 	/* ensures that 100% in properties of #crate-search-div:after
 	are relative to the size of this div */
 	position: relative;
 	/* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
-	min-width: 5em;
+	min-width: 0;
 }
 #crate-search {
-	min-width: 115px;
 	padding: 0 23px 0 4px;
 	/* prevents the <select> from overflowing the containing div in case it's shrunk */
 	max-width: 100%;
@@ -1825,6 +1827,7 @@ a.tooltip:hover::after {
 	margin-left: var(--button-left-margin);
 	display: flex;
 	line-height: 1.25;
+	min-width: 14px;
 }
 #sidebar-button {
 	display: none;
@@ -1861,6 +1864,9 @@ a.tooltip:hover::after {
 	width: 80px;
 	border-radius: var(--toolbar-button-border-radius);
 }
+#settings-menu > a, #help-button > a {
+	min-width: 0;
+}
 #sidebar-button > a {
 	background-color: var(--button-background-color);
 	border-color: var(--border-color);

tests/rustdoc-gui/scrape-examples-layout.goml

@@ -90,8 +90,8 @@ assert-css: (".scraped-example .example-wrap::after", {"bottom": "0px"})
 // Then with mobile
 set-window-size: (600, 600)
 store-size: (".scraped-example .scraped-example-title", {"height": title_height})
-assert-position: (".scraped-example", {"y": 281})
-assert-position: (".scraped-example .prev", {"y": 281 + |offset_y| + |title_height|})
+assert-position: (".scraped-example", {"y": 287})
+assert-position: (".scraped-example .prev", {"y": 287 + |offset_y| + |title_height|})
 
 define-function: (
     "check_title_and_code_position",

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

@@ -64,7 +64,7 @@ set-text: (
 )
 
 // Then we compare again to confirm the height didn't change.
-assert-size: ("#crate-search", {"width": 509})
+assert-size: ("#crate-search", {"width": 370})
 assert-size: (".search-results-title", {
     "height": |search_results_title_height|,
 })

tests/rustdoc-gui/sidebar-source-code-display.goml

@@ -141,7 +141,7 @@ click: "#sidebar-button"
 wait-for-css: (".src .sidebar > *", {"visibility": "hidden"})
 // We scroll to line 117 to change the scroll position.
 scroll-to: '//*[@id="117"]'
-store-value: (y_offset, "2564")
+store-value: (y_offset, "2570")
 assert-window-property: {"pageYOffset": |y_offset|}
 // Expanding the sidebar...
 click: "#sidebar-button"

tests/rustdoc-gui/source-anchor-scroll.goml

@@ -8,13 +8,13 @@ set-window-size: (600, 800)
 assert-property: ("html", {"scrollTop": "0"})
 
 click: '//a[text() = "barbar" and @href="#5-7"]'
-assert-property: ("html", {"scrollTop": "194"})
+assert-property: ("html", {"scrollTop": "200"})
 click: '//a[text() = "bar" and @href="#28-36"]'
-assert-property: ("html", {"scrollTop": "225"})
+assert-property: ("html", {"scrollTop": "231"})
 click: '//a[normalize-space() = "sub_fn" and @href="#2-4"]'
-assert-property: ("html", {"scrollTop": "122"})
+assert-property: ("html", {"scrollTop": "128"})
 
 // We now check that clicking on lines doesn't change the scroll
 // Extra information: the "sub_fn" function header is on line 1.
 click: '//*[@id="6"]'
-assert-property: ("html", {"scrollTop": "122"})
+assert-property: ("html", {"scrollTop": "128"})

tests/rustdoc-gui/toggle-docs-mobile.goml

@@ -3,12 +3,12 @@
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
 set-window-size: (433, 600)
 assert-attribute: (".top-doc", {"open": ""})
-click: (4, 260) // This is the position of the top doc comment toggle
+click: (4, 270) // This is the position of the top doc comment toggle
 assert-attribute-false: (".top-doc", {"open": ""})
-click: (4, 260)
+click: (4, 270)
 assert-attribute: (".top-doc", {"open": ""})
 // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
-click: (3, 260)
+click: (3, 270)
 assert-attribute: (".top-doc", {"open": ""})
 
 // Assert the position of the toggle on the top doc block.
@@ -24,10 +24,10 @@ assert-position: (
 // Now we do the same but with a little bigger width
 set-window-size: (600, 600)
 assert-attribute: (".top-doc", {"open": ""})
-click: (4, 260) // New Y position since all search elements are back on one line.
+click: (4, 270) // New Y position since all search elements are back on one line.
 assert-attribute-false: (".top-doc", {"open": ""})
-click: (4, 260)
+click: (4, 270)
 assert-attribute: (".top-doc", {"open": ""})
 // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
-click: (3, 260)
+click: (3, 270)
 assert-attribute: (".top-doc", {"open": ""})