astro-theme-popular 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Popular: a warm, community-first Astro theme for meetups, clubs and fan communities. Ships as an Astro integration.",
   "type": "module",
   "license": "MIT",

package/scripts/toc.js

@@ -13,8 +13,19 @@
       var el = document.getElementById(id);
       if (el) { map[id] = a; targets.push(el); }
     });
+    /* The sidebar has its own scrollbar when it outgrows the viewport, so
+       follow the reader: keep the highlighted entry in view. Done by hand
+       rather than with scrollIntoView, which would also scroll the page. */
+    function reveal(a) {
+      if (!a || toc.scrollHeight <= toc.clientHeight) return;
+      var box = toc.getBoundingClientRect();
+      var item = a.getBoundingClientRect();
+      if (item.top < box.top) toc.scrollTop -= box.top - item.top;
+      else if (item.bottom > box.bottom) toc.scrollTop += item.bottom - box.bottom;
+    }
     function setActive(id) {
       links.forEach(function (a) { a.classList.toggle("is-active", a === map[id]); });
+      reveal(map[id]);
     }
     var obs = new IntersectionObserver(function (entries) {
       entries.forEach(function (e) { if (e.isIntersecting) setActive(e.target.id); });

package/src/styles/components.css

@@ -245,7 +245,13 @@ pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
 
 /* ---------- Docs (handbook / runbooks) ---------- */
 .g-doc { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; padding-block: var(--space-5) var(--space-6); }
-.g-doc-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 0.15rem; }
+/* The sidebar outgrows the viewport on a long page (every h2/h3 of the
+   current page nests under its entry). A sticky element taller than the
+   viewport cannot be scrolled to its end, so the entries below the fold,
+   including the links to the other docs pages, were unreachable without
+   scrolling through the whole article first. Cap it to the space under
+   the header and give it its own scrollbar. */
+.g-doc-toc { position: sticky; top: 92px; max-height: calc(100vh - 92px - var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 0.15rem; }
 .g-doc-toc__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
 .g-doc-toc a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.3; color: var(--text-body); border-left: 3px solid transparent; }
 .g-doc-toc a:hover { color: var(--color-primary); }
@@ -306,7 +312,7 @@ pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
   /* Narrow screens: the sidebar becomes a pill row of sibling doc pages.
      The column labels and per-heading anchors only make sense in a sticky
      sidebar; the headings they point to sit directly below anyway. */
-  .g-doc-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 0.8rem; margin-bottom: 1rem; }
+  .g-doc-toc { position: static; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 0.8rem; margin-bottom: 1rem; }
   .g-doc-toc__label { display: none; }
   .g-doc-toc a[href^="#"] { display: none; }
   .g-doc-toc a { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; }