From 5cc9a302fb72ef8936762709671c6fc0144fc355 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Thu, 1 Oct 2026 00:32:35 -0400 Subject: [PATCH] =?UTF-8?q?T45d=20Site=20=C2=B7=20Components:=20the=20rail?= =?UTF-8?q?=20reveals=20the=20current=20story=20with=20room,=20Shift=20arr?= =?UTF-8?q?ows=20stay=20the=20page's?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Story.tsx | 4 ++-- frontend/src/styles.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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; }