T45d Site · Components: the rail reveals the current story with room, Shift arrows stay the page's

frontend/src/pages/Story.tsx

@@ -20,12 +20,12 @@ export function Story() {
   }, [chapter, found]);
 
   useEffect(() => {
-    document.querySelector('.side [aria-current="page"]')?.scrollIntoView({ block: "nearest" });
+    document.querySelector('.side li [aria-current="page"]')?.scrollIntoView({ block: "nearest" });
   }, [page, story]);
 
   useEffect(() => {
     const step = (e: KeyboardEvent) => {
-      if (e.metaKey || e.ctrlKey || e.altKey || typing(e)) return;
+      if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey || typing(e)) return;
       const to = e.key === "ArrowLeft" ? prev : e.key === "ArrowRight" ? next : undefined;
       if (to) navigate({ to: "/components/$page/$story/", params: { page: to.chapter.slug, story: to.story.slug } });
     };

frontend/src/styles.css

@@ -130,7 +130,7 @@ main > :first-child { animation: enter 480ms ease-out both; }
 .titles a:hover, .side a:hover, .side a[aria-current="page"], .side-chapter[data-on] { color: var(--fg); }
 
 .reader { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding: 0 64px; }
-.side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 64px 8px 64px 0; overscroll-behavior: contain; }
+.side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 64px 8px 64px 0; overscroll-behavior: contain; scroll-padding-block: 64px; }
 .side nav > div { margin-bottom: 4px; }
 .side-chapter { display: block; padding: 4px 0; font-size: 15px; font-weight: 500; }
 .side ol { list-style: none; margin: 4px 0 12px; padding: 0 0 0 14px; border-left: 1px solid var(--line); font-size: 13px; line-height: 20px; }