From f30c88e59dfab819a1002b4e3224076d4e7f3a9b Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Thu, 20 Aug 2026 20:11:10 +0200 Subject: [PATCH 1/4] fix(website): scroll the current page into view in the docs sidebar (#3986) The sidebar starts at scrollTop 0 on load, so any page low in the list sits below the fold. On the hotkeys page the current link was 2811px down inside a 998px scroller, roughly 1800px out of sight. Scroll it into view on mount with `nearest`, which does nothing when the item is already visible, and only on mount, so navigating within the docs does not yank the sidebar under the pointer. `scrollPaddingBlock` on the aside keeps the link off the edge instead of flush against it. --- .../src/components/navigation/docs/docs-sidebar.tsx | 12 +++++++++++- website/src/theme/recipes/layout.ts | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/website/src/components/navigation/docs/docs-sidebar.tsx b/website/src/components/navigation/docs/docs-sidebar.tsx index 1aecf88d37..5c11aec5fd 100644 --- a/website/src/components/navigation/docs/docs-sidebar.tsx +++ b/website/src/components/navigation/docs/docs-sidebar.tsx @@ -3,6 +3,7 @@ import { Collapsible } from '@ark-ui/react/collapsible' import { ChevronRightIcon } from 'lucide-react' import NextLink from 'next/link' import { usePathname } from 'next/navigation' +import { useEffect, useRef } from 'react' import { Badge } from '~/components/ui/badge' import { Icon } from '~/components/ui/icon' import type { SidebarGroup } from '~/lib/sidebar' @@ -17,6 +18,13 @@ interface Props { export const DocsSidebar = (props: Props) => { const { groups } = props const pathname = usePathname() + const currentRef = useRef(null) + + // On load the sidebar starts at the top, so a page low in the list is scrolled out of sight. + // `nearest` brings it in without moving anything when it is already visible. + useEffect(() => { + currentRef.current?.scrollIntoView({ block: 'nearest' }) + }, []) return (