diff --git a/frontend/src/pages/Story.tsx b/frontend/src/pages/Story.tsx index 4e35623..91368e2 100644 --- a/frontend/src/pages/Story.tsx +++ b/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 } }); }; diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 1dbcfd6..d428b83 100644 --- a/frontend/src/styles.css +++ b/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; }