Keep guide sidebar visible

Author: Lling0000

assets/site.js

@@ -340,7 +340,7 @@ const copy = {
     finishSummary: (day) => `把「${scheduleLabel("zh", day)}」各写成一句 if-then 规则。`,
     finishAction: "从今天的新学或复习里选一个点，变成今天能执行的微动作。",
     finishQuestion: "记录一个讲不顺的点，并回原文补一个证据。",
-    reviewLabel: (review) => `Review ${review.reviewNumber} · +${review.offset}d`,
+    reviewLabel: (review) => `第 ${review.chapterIndex} 章 · Review ${review.reviewNumber} · +${review.offset}d`,
     reviewTitle: (review) => `间隔复习: ${review.chapter.title}`,
     reviewFocus: (review) =>
       `第 ${review.reviewNumber} 次复习：不重读整章，先复述，卡住才回原文。`,
@@ -411,7 +411,7 @@ const copy = {
     finishSummary: (day) => `Turn "${scheduleLabel("en", day)}" into one if-then rule each.`,
     finishAction: "Choose one point from today's new or review work and turn it into a micro-action.",
     finishQuestion: "Record one point that still feels hard to explain, then repair it from the guide.",
-    reviewLabel: (review) => `Review ${review.reviewNumber} · +${review.offset}d`,
+    reviewLabel: (review) => `Ch. ${review.chapterIndex} · Review ${review.reviewNumber} · +${review.offset}d`,
     reviewTitle: (review) => `Spaced review: ${review.chapter.title}`,
     reviewFocus: (review) =>
       `Review ${review.reviewNumber}: explain first, then reopen the guide only where you get stuck.`,

assets/styles.css

@@ -251,17 +251,23 @@ button:disabled {
 }
 
 .sidebar {
+  position: fixed;
+  top: 4.4rem;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+  width: var(--sidebar);
+  overflow: hidden;
   border-right: 1px solid var(--line);
   background: rgb(255 255 255 / 72%);
 }
 
 .sidebar-sticky {
-  position: sticky;
-  top: 4.4rem;
+  height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  max-height: calc(100vh - 4.4rem);
   padding: 1rem;
 }
 
@@ -340,6 +346,8 @@ button:disabled {
 }
 
 .day-rail {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: auto;
   padding-right: 0.1rem;
 }
@@ -446,6 +454,8 @@ button:disabled {
 }
 
 .toc {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: auto;
   padding-right: 0.15rem;
 }
@@ -484,6 +494,7 @@ button:disabled {
 }
 
 .workspace {
+  grid-column: 2;
   min-width: 0;
   max-width: 100%;
 }
@@ -1245,9 +1256,15 @@ button:disabled {
   }
 
   .sidebar {
-    position: sticky;
+    position: fixed;
     top: 4.4rem;
+    right: 0;
+    bottom: auto;
+    left: 0;
     z-index: 20;
+    width: auto;
+    height: auto;
+    overflow: visible;
     border-right: 0;
     border-bottom: 1px solid var(--line);
     background: rgb(246 250 248 / 95%);
@@ -1258,7 +1275,7 @@ button:disabled {
     position: static;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    max-height: none;
+    height: auto;
     padding: 0.75rem 1rem;
   }
 
@@ -1321,6 +1338,11 @@ button:disabled {
   .reader-view {
     padding-top: 1rem;
   }
+
+  .workspace {
+    grid-column: auto;
+    padding-top: 6.9rem;
+  }
 }
 
 @media (max-width: 760px) {
@@ -1378,6 +1400,10 @@ button:disabled {
     top: 6rem;
   }
 
+  .workspace {
+    padding-top: 7.1rem;
+  }
+
   .learning-hero h1,
   .schedule-hero h1,
   .reader-hero h1 {

index.html

@@ -19,12 +19,12 @@
     <meta name="twitter:card" content="summary" />
     <link rel="canonical" href="https://lling0000.github.io/Vibe_coding_guide/" />
     <title>Vibe Coding Guide | AI Coding 工程工作流手册</title>
-    <link rel="stylesheet" href="./assets/styles.css?v=20260617-chapter" />
+    <link rel="stylesheet" href="./assets/styles.css?v=20260617-sidebar-review" />
     <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/lucide@0.475.0/dist/umd/lucide.min.js"></script>
-    <script defer src="./assets/site.js?v=20260617-chapter"></script>
+    <script defer src="./assets/site.js?v=20260617-sidebar-review"></script>
   </head>
   <body data-mode="planner">
     <div class="site-progress" aria-hidden="true">