Fix scraped examples background gradient

1 files changed, 11 insertions, 1 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 9d3a8c6bc14..6b31c596c40 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -2282,8 +2282,13 @@ in src-script.js and main.js
 	.example-wrap.scraped-example .button-holder {
 		top: calc(var(--pre-line-height) + 4px);
 	}
+	.scraped-example:not(.expanded)::before {
+		/* The gradient effect needs to be moved under the title */
+		top: var(--pre-line-height);
+	}
 }
 
+
 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
 @media (min-width: 701px) {
 	/* Places file-link for a scraped example on top of the example to save space.
@@ -2305,6 +2310,12 @@ in src-script.js and main.js
 	.item-table > li > div {
 		overflow-wrap: anywhere;
 	}
+
+	/* Starting this width, the "title" of scraped example will be in the code block so we can
+	put the background gradient at the top. */
+	.scraped-example:not(.expanded)::before {
+		top: 0;
+	}
 }
 
 @media print {
@@ -2395,7 +2406,6 @@ in src-script.js and main.js
 	z-index: 1;
 }
 .scraped-example:not(.expanded)::before {
-	top: 0;
 	background: linear-gradient(to bottom,
 		var(--scrape-example-code-wrapper-background-start),
 		var(--scrape-example-code-wrapper-background-end));