Correctly handle code examples buttons position

Author: GuillaumeGomez

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

@@ -34,6 +34,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 </g></svg>');
 	--button-left-margin: 4px;
 	--button-border-radius: 2px;
+	--pre-line-height: 1.5rem;
 }
 
 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -365,7 +366,7 @@ code, pre, .code-header {
 }
 pre {
 	padding: 14px;
-	line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */
+	line-height: var(--pre-line-height); /* https://github.com/rust-lang/rust/issues/105906 */
 }
 pre.item-decl {
 	overflow-x: auto;
@@ -2278,6 +2279,9 @@ in src-script.js and main.js
 		/* Dirty hacky to force it to remain on the same line as the line numbers. */
 		width: 10px;
 	}
+	.example-wrap.scraped-example .button-holder {
+		top: calc(var(--pre-line-height) + 4px);
+	}
 }
 
 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */

tests/rustdoc-gui/code-example-buttons.goml

@@ -94,3 +94,24 @@ call-function: ("check-buttons",{
     "filter": "invert(0.5)",
     "filter_hover": "invert(0.35)",
 })
+
+define-function: (
+    "check-buttons-position",
+    [pre_selector],
+    block {
+        move-cursor-to: |pre_selector| + " .rust:not(.item-decl)"
+        store-position: (|pre_selector| + " .rust:not(.item-decl)", {"x": x, "y": y})
+        assert-position: (|pre_selector| + " .rust:not(.item-decl) + .button-holder", {
+            "y": |y| + 4,
+        })
+    }
+)
+
+call-function: ("check-buttons-position", {"pre_selector": ".example-wrap"})
+
+go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
+// We should work as well for scraped examples.
+call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})
+// And also when the scraped example "title" goes above.
+set-window-size: (600, 600)
+call-function: ("check-buttons-position", {"pre_selector": ".example-wrap.scraped-example"})