fix: vertical alignment of the toc

Author: MohamedH1998

src/components/overrides/TableOfContents.astro

@@ -47,23 +47,23 @@ const { editUrl } = Astro.locals.starlightRoute;
 						{editUrl && (
 							<a
 								href={editUrl}
-								class="group flex items-center gap-2.5 rounded-sm text-[13px] text-[var(--sl-color-gray-3)] transition-colors duration-150 ease-out hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
-							>
-								<Icon
-									name="pencil"
-									class="h-3.5 w-3.5 opacity-60 transition-opacity duration-150 group-hover:opacity-100"
-									aria-hidden="true"
-								/>
-								<span>Edit page</span>
-							</a>
-						)}
-						<a
-							href="https://github.com/cloudflare/cloudflare-docs/issues/new/choose"
-							class="group flex items-center gap-2.5 rounded-sm text-[13px] text-[var(--sl-color-gray-3)] transition-colors duration-150 ease-out hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
+							class="group flex items-center gap-2.5 rounded-sm text-[13px] text-[var(--sl-color-gray-2)] transition-colors duration-150 ease-out hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
 						>
 							<Icon
-								name="github"
-								class="h-3.5 w-3.5 opacity-60 transition-opacity duration-150 group-hover:opacity-100"
+								name="pencil"
+								class="h-3.5 w-3.5"
+								aria-hidden="true"
+							/>
+							<span>Edit page</span>
+						</a>
+					)}
+					<a
+						href="https://github.com/cloudflare/cloudflare-docs/issues/new/choose"
+						class="group flex items-center gap-2.5 rounded-sm text-[13px] text-[var(--sl-color-gray-2)] transition-colors duration-150 ease-out hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
+					>
+						<Icon
+							name="github"
+							class="h-3.5 w-3.5"
 								aria-hidden="true"
 							/>
 							<span>Report issue</span>
@@ -155,15 +155,10 @@ const { editUrl } = Astro.locals.starlightRoute;
 
 	/* Hover state */
 	.tb-container ul a:hover {
-		border-left-color: var(--sidebar-border) !important;
+		border-left-color: var(--sidebar-border-hover) !important;
 		color: var(--sidebar-text-strong) !important;
 	}
 
-	/* Light mode: orange border on hover */
-	:root[data-theme="light"] .tb-container ul a:hover {
-		border-left-color: var(--orange-accent-200) !important;
-	}
-
 	/* Active state (hooking into starlight's scrollspy) */
 	.tb-container ul a[aria-current="true"] {
 		border-left-color: var(--orange-accent-200) !important;

src/styles/sidebar.css

@@ -46,6 +46,7 @@
 	--sidebar-active-bg: var(--color-cl1-gray-9);
 	--sidebar-active-text: var(--sidebar-text-strong);
 	--sidebar-border: var(--color-cl1-gray-8);
+	--sidebar-border-hover: var(--color-cl1-gray-7);
 	--sl-color-sidebar-active: var(--color-cl1-black);
 	--sl-color-sidebar-hover: var(--color-cl1-gray-9);
 }
@@ -62,6 +63,7 @@
 	--sidebar-active-bg: var(--sidebar-orange-accent-600);
 	--sidebar-active-text: var(--orange-accent-200);
 	--sidebar-border: var(--color-cl1-gray-2);
+	--sidebar-border-hover: var(--color-cl1-gray-3);
 	--sl-color-sidebar-active: var(--orange-accent-200);
 	--sl-color-sidebar-hover: var(--sidebar-orange-accent-600);
 }

src/styles/tailwind.css

@@ -201,4 +201,12 @@
 		width: 100%;
 		max-width: 18rem;
 	}
+
+	/* Align "On this page" baseline with the breadcrumbs / "Copy page" button text.
+	   Content panel top = 1rem + breadcrumb padding-top = 0.5rem → 1.5rem to text baseline.
+	   Starlight's default is 1rem, so bump it to match. */
+	.right-sidebar-panel {
+		padding-top: 1.5rem !important;
+		padding-left: 1.5rem !important;
+	}
 }