Function
Each branch is a self-contained scroll region, not a column that grows with the course. On a 107-lesson course an unbounded outline is taller than the viewport, which pushed the current lesson far below the fold and made the sidebar unable to answer the one question it exists for — where am I?. Bounding each branch and scrolling the current lesson into it answers that on arrival, without touching the page's own scroll position.
The two branches differ in when they can be measured. The sidebar is
laid out from the first paint, so it positions itself on mount. The
drawer's contents have no layout while the <details> is closed, so it
tracks the open state and positions itself the moment the learner opens
it.
The mobile row's shape was chosen by comparison on a real phone against two
other candidates — a progress card above the breadcrumb, and a bar docked to
the bottom of the viewport. The record of why this one won is
openspec/changes/archive/2026-09-11-mobile-course-content-variants.
Responsive shell around the
Outline. On screens>= lgit renders as a permanent sidebar (the design's desktop layout). On smaller screens it renders as a compact row above the breadcrumb — collapsed by default, expanded with a tap.The Outline is rendered twice (once per breakpoint) so each branch owns its own DOM subtree; the cost is negligible because the Outline is a static tree of links and headings.