Rollup merge of #157381 - robbycbennett:librustdoc-fix-borders, r=notriddle

librustdoc: fix CSS border issue to support Firefox high contrast mode

This fixes #157378. The spacing and the clickable areas of the links are identical. The only difference is that there are no longer any unsightly thick borders.

Screenshot before the fix:

<img width="1180" height="676" alt="image" src="https://github.com/user-attachments/assets/f213561f-de90-4262-baba-2aa18c59d287" />

Screenshot after the fix:

<img width="1180" height="676" alt="image" src="https://github.com/user-attachments/assets/72504d0a-cca3-4b39-8d35-ecc5ac84e361" />

Author: jhpratt

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

@@ -731,7 +731,8 @@ ul.block, .block li, .block ul {
 }
 
 .block ul a {
-	padding-left: 1rem;
+	/* extend click target to far edge of screen (mile wide bar) */
+	padding-left: calc(1rem + var(--sidebar-elems-left-padding));
 }
 
 .sidebar-elems a,
@@ -740,7 +741,7 @@ ul.block, .block li, .block ul {
 	padding: 0.25rem; /* 4px */
 	margin-right: 0.25rem;
 	/* extend click target to far edge of screen (mile wide bar) */
-	border-left: solid var(--sidebar-elems-left-padding) transparent;
+	padding-left: calc(0.25rem + var(--sidebar-elems-left-padding));
 	margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding));
 	background-clip: border-box;
 }
@@ -861,7 +862,7 @@ ul.block, .block li, .block ul {
 		|        └─────┘
 		*/
 	margin-top: -16px;
-	border-top: solid 16px transparent;
+	padding-top: 16px;
 	box-sizing: content-box;
 	position: relative;
 	background-clip: border-box;
@@ -870,8 +871,6 @@ ul.block, .block li, .block ul {
 
 .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: 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
@@ -888,7 +887,8 @@ ul.block, .block li, .block ul {
 		x = ( 16px - 0.57rem ) / 2
 	*/
 	padding: calc( ( 16px - 0.57rem ) / 2 ) 0.25rem;
-	padding-left: 0.2rem;
+	/* extend click target to far edge of screen (mile wide bar) */
+	padding-left: calc(0.2rem + var(--sidebar-elems-left-padding));
 }
 
 .sidebar-crate h2 .version {

tests/rustdoc-gui/huge-logo.goml

@@ -7,4 +7,4 @@ set-window-size: (1280, 1024)
 assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48})
 // offsetWidth = width of sidebar, offsetHeight = height + top padding
 assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64})
-assert-css: (".sidebar-crate .logo-container img", {"border-top-width": "16px", "margin-top": "-16px"})
+assert-css: (".sidebar-crate .logo-container img", {"padding-top": "16px", "margin-top": "-16px"})