From 3924493a1070b5407a2203e99e4856af7e37f7d5 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Mon, 15 Jul 2024 16:20:37 -0700
Subject: [PATCH] rustdoc: make sidebar highlight cover whole click target

---
 src/librustdoc/html/static/css/rustdoc.css | 43 +++++++++++++++++++++-
 tests/rustdoc-gui/huge-logo.goml           |  4 +-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 940f444dde1..cb8b82e8bde 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -564,7 +564,7 @@ ul.block, .block li {
 	/* extend click target to far edge of screen (mile wide bar) */
 	border-left: solid var(--sidebar-elems-left-padding) transparent;
 	margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding));
-	background-clip: padding-box;
+	background-clip: border-box;
 }
 
 .sidebar h2 {
@@ -641,11 +641,50 @@ ul.block, .block li {
 	text-align: center;
 }
 
+.sidebar-crate .logo-container img {
+	/* When in a horizontal logo lockup, the highlight color of the crate name menu item
+		extends underneath the actual logo (in a vertical lockup, that background highlight
+		extends to the left edge of the screen).
+
+		To prevent a weird-looking colored band from appearing under the logo, cover it up
+		with the sidebar's background. Additionally, the crate name extends slightly above
+		the logo, so that its highlight has a bit of space to let the ascenders breath while
+		also having those ascenders meet exactly with the top of the logo.
+
+		In ANSI art, make it look like this:
+		|        ┌─────┐
+		|    (R) │ std │
+		|        └─────┘
+
+		Not like this (which would happen without the z-index):
+		|     ┌────────┐
+		|    (│    std │
+		|     └────────┘
+
+		Not like this (which would happen without the background):
+		|     ┌────────┐
+		|    (R)   std │
+		|     └────────┘
+
+		Nor like this (which would happen without the negative margin):
+		|     ─────────┐
+		|    (R) │ std │
+		|        └─────┘
+		*/
+	margin-top: -16px;
+	border-top: solid 16px transparent;
+	box-sizing: content-box;
+	position: relative;
+	background-color: var(--sidebar-background-color);
+	background-clip: border-box;
+	z-index: 1;
+}
+
 .sidebar-crate h2 a {
 	display: block;
 	/* extend click target to far edge of screen (mile wide bar) */
 	border-left: solid var(--sidebar-elems-left-padding) transparent;
-	background-clip: padding-box;
+	background-clip: border-box;
 	margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding));
 	/* Align the sidebar crate link with the search bar, which have different
 		font sizes.
diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml
index 6fc45ede181..01999401e60 100644
--- a/tests/rustdoc-gui/huge-logo.goml
+++ b/tests/rustdoc-gui/huge-logo.goml
@@ -5,8 +5,8 @@ go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
 set-window-size: (1280, 1024)
 // offsetWidth = width of sidebar + left and right margins
 assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48})
-// offsetWidth = width of sidebar
-assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48})
+// offsetWidth = width of sidebar, offsetHeight = height + top padding
+assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64})
 
 set-window-size: (400, 600)
 // offset = size + margin