Rollup merge of #120526 - GuillaumeGomez:mobile-long-crate-name, r=notriddle

rustdoc: Correctly handle long crate names on mobile

Fixes https://github.com/rust-lang/rust/issues/120471.

It now renders like this:

![image](https://github.com/rust-lang/rust/assets/3050060/065b4b8b-ba55-4163-a928-8d7bf735c111)

r? `@notriddle`

4 files changed, 26 insertions, 9 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index c01a25534f9..9993dfb1d8c 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1941,13 +1941,8 @@ in src-script.js and main.js
 		   pixels to avoid overflowing the topbar when the user sets a bigger
 		   font size. */
 		font-size: 24px;
-	}
-
-	.mobile-topbar h2 a {
-		display: block;
-		text-overflow: ellipsis;
-		overflow: hidden;
 		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
 	.mobile-topbar .logo-container > img {
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index b46701b55ea..b26efb75ff6 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -45,7 +45,7 @@ function setMobileTopbar() {
         const mobileTitle = document.createElement("h2");
         mobileTitle.className = "location";
         if (hasClass(document.querySelector(".rustdoc"), "crate")) {
-            mobileTitle.innerText = `Crate ${window.currentCrate}`;
+            mobileTitle.innerHTML = `Crate <a href="#">${window.currentCrate}</a>`;
         } else if (locationTitle) {
             mobileTitle.innerHTML = locationTitle.innerHTML;
         }
diff --git a/tests/rustdoc-gui/mobile-crate-name.goml b/tests/rustdoc-gui/mobile-crate-name.goml
new file mode 100644
index 00000000000..a0c96eec8a5
--- /dev/null
+++ b/tests/rustdoc-gui/mobile-crate-name.goml
@@ -0,0 +1,22 @@
+// Checks that if the crate name is too long on mobile, it will not grow and overflow its parent
+// (thanks to text overflow ellipsis).
+
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+// First we change the title to make it big.
+set-window-size: (350, 800)
+// We ensure that the "format" of the title is the same as the one we'll use.
+assert-text: (".mobile-topbar .location a", "test_docs")
+// We store the height we know is correct.
+store-property: (".mobile-topbar .location", {"offsetHeight": height})
+// We change the crate name to something longer.
+set-text: (".mobile-topbar .location a", "cargo_packager_resource_resolver")
+// And we check that the size remained the same.
+assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})
+
+// Now we check if it works for the non-crate pages as well.
+go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+// We store the height we know is correct.
+store-property: (".mobile-topbar .location", {"offsetHeight": height})
+set-text: (".mobile-topbar .location a", "Something_incredibly_long_because")
+// And we check that the size remained the same.
+assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})
diff --git a/tests/rustdoc-gui/type-declation-overflow.goml b/tests/rustdoc-gui/type-declation-overflow.goml
index 5780f5c88f8..a97cc98897a 100644
--- a/tests/rustdoc-gui/type-declation-overflow.goml
+++ b/tests/rustdoc-gui/type-declation-overflow.goml
@@ -39,8 +39,8 @@ assert-property: ("pre.item-decl", {"scrollWidth": "950"})
 set-window-size: (600, 600)
 go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
 // It shouldn't have an overflow in the topbar either.
-store-property: (".mobile-topbar h2", {"scrollWidth": scrollWidth})
-assert-property: (".mobile-topbar h2", {"clientWidth": |scrollWidth|})
+store-property: (".mobile-topbar", {"scrollWidth": scrollWidth})
+assert-property: (".mobile-topbar", {"clientWidth": |scrollWidth|})
 assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"})
 
 // Check wrapping for top main-heading h1 and out-of-band.