Rollup merge of #92861 - jsha:mobile-column-flex, r=GuillaumeGomez

Rustdoc mobile: put out-of-band info on its own line

Before this, the item name and the stability, source link, and "collapse
all docs" would compete for room on a single line, resulting in awkward
wrapping behavior on mobile. This gives a separate line for that
out-of-band information. It also removes the "copy path" icon on mobile
to make a little more room.

Demo: https://rustdoc.crud.net/jsha/mobile-column-flex/std/string/struct.String.html

r? `@GuillaumeGomez`

1 files changed, 20 insertions, 9 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 44a9a571fa1..d0244351b59 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -148,11 +148,11 @@ h1.fqn {
 }
 .main-heading {
 	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	border-bottom: 1px dashed #DDDDDD;
+	padding-bottom: 6px;
 	margin-bottom: 15px;
-
-	/* workaround to keep flex from breaking below 700 px width due to the float: right on the nav
-	   above the h1 */
-	padding-left: 1px;
 }
 .main-heading a:hover {
 	text-decoration: underline;
@@ -623,11 +623,7 @@ nav.sub {
 
 .content .out-of-band {
 	flex-grow: 0;
-	text-align: right;
-	margin-left: auto;
-	margin-right: 0;
 	font-size: 1.15rem;
-	padding: 0 0 0 12px;
 	font-weight: normal;
 	float: right;
 }
@@ -1748,10 +1744,25 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding-top: 0px;
 	}
 
-	.rustdoc {
+	.rustdoc,
+	.main-heading {
 		flex-direction: column;
 	}
 
+	.content .out-of-band {
+		text-align: left;
+		margin-left: initial;
+		padding: initial;
+	}
+
+	.content .out-of-band .since::before {
+		content: "Since ";
+	}
+
+	#copy-path {
+		display: none;
+	}
+
 	/* Hide the logo and item name from the sidebar. Those are displayed
 	   in the mobile-topbar instead. */
 	.sidebar .sidebar-logo,