From 2b661c33de0b3bc96b47915f589c74d71a755998 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Wed, 21 Dec 2022 18:03:31 -0700
Subject: [PATCH] rustdoc: simplify CSS and DOM for more-scraped-examples

This gets rid of the more-scraped-examples-inner wrapper, instead nesting the
children directly and using absolute positioning for the toggle line.
---
 src/librustdoc/html/render/mod.rs               |  5 ++---
 src/librustdoc/html/static/css/rustdoc.css      | 17 ++++++-----------
 .../rustdoc-gui/scrape-examples-layout.goml     | 10 +++++-----
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index 146e5010e4e42..8bccf68029aa3 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@@ -3005,8 +3005,7 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
                   </summary>\
                   <div class=\"hide-more\">Hide additional examples</div>\
                   <div class=\"more-scraped-examples\">\
-                    <div class=\"toggle-line\"><div class=\"toggle-line-inner\"></div></div>\
-                    <div class=\"more-scraped-examples-inner\">"
+                    <div class=\"toggle-line\"><div class=\"toggle-line-inner\"></div></div>"
         );
 
         // Only generate inline code for MAX_FULL_EXAMPLES number of examples. Otherwise we could
@@ -3030,7 +3029,7 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
             write!(w, "</ul></div>");
         }
 
-        write!(w, "</div></div></details>");
+        write!(w, "</div></details>");
     }
 
     write!(w, "</div>");
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index b2f220b057110..21dc3eac5564e 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1991,20 +1991,15 @@ in storage.js
 }
 
 .more-scraped-examples {
-	margin-left: 5px;
-	display: flex;
-	flex-direction: row;
-}
-
-.more-scraped-examples-inner {
-	/* 20px is width of toggle-line + toggle-line-inner */
-	width: calc(100% - 20px);
+	margin-left: 25px;
+	position: relative;
 }
 
 .toggle-line {
-	align-self: stretch;
-	margin-right: 10px;
-	margin-top: 5px;
+	position: absolute;
+	top: 5px;
+	bottom: 0;
+	right: calc(100% + 10px);
 	padding: 0 4px;
 	cursor: pointer;
 }
diff --git a/src/test/rustdoc-gui/scrape-examples-layout.goml b/src/test/rustdoc-gui/scrape-examples-layout.goml
index 988c911b7839a..fde9a0ab0bc30 100644
--- a/src/test/rustdoc-gui/scrape-examples-layout.goml
+++ b/src/test/rustdoc-gui/scrape-examples-layout.goml
@@ -10,26 +10,26 @@ assert-property-false: (
 // Check that examples with very long lines have the same width as ones that don't.
 store-property: (
     clientWidth,
-    ".more-scraped-examples .scraped-example:nth-child(1) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(2) .code-wrapper .src-line-numbers",
     "clientWidth"
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(2) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(3) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(3) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(4) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(4) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(5) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )
 
 assert-property: (
-    ".more-scraped-examples .scraped-example:nth-child(5) .code-wrapper .src-line-numbers",
+    ".more-scraped-examples .scraped-example:nth-child(6) .code-wrapper .src-line-numbers",
     {"clientWidth": |clientWidth|}
 )