@kolkrabbi/kol-framework 0.31.0 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "KOL app shell — sidenav, layout, theme toggle, footer, heroes + brand color layer. SideNav takes nav data as props so the tree stays app-local.",
   "license": "MIT",
   "type": "module",

package/src/SideNav.jsx

@@ -344,16 +344,22 @@ function SideNavInner({
         * THE single collapse/resize control — click toggles, drag resizes,
         * snap-to-default on release, Home/Enter/Space on the keyboard. */}
 
-      <div className="kol-sidenav-scroll flex-1 flex flex-col justify-between overflow-y-auto pt-4 pb-4 [scrollbar-width:thin]">
+      {/* ONLY the tree scrolls (fxr's re-measure, 2026-08-28): the theme slot
+        * and the pinned rows used to sit inside this region, so on a 26-row
+        * collapsed tree they scrolled off below the footer — "pinned" only
+        * held while the tree was shorter than the rail. They are the block
+        * after it now, above the footer, the tree scrolling underneath. */}
+      <div className="kol-sidenav-scroll flex-1 overflow-y-auto pt-4 pb-4 [scrollbar-width:thin]">
         <nav aria-label="Sections">
           <ul className="kol-sidenav-tree flex flex-col gap-[2px]">
             {navTree.map(renderCat)}
           </ul>
         </nav>
+      </div>
 
-        {/* hop-bare carries its own gutter padding; collapsed falls back to
-            `icon` — a full-width label can't sit in the collapsed rail. */}
-        <div>
+      {/* hop-bare carries its own gutter padding; collapsed falls back to
+          `icon` — a full-width label can't sit in the collapsed rail. */}
+      <div className="pb-4">
           {themeToggle && (
             <div className="kol-sidenav-theme-slot flex">
               <ThemeToggle variant={collapsed ? 'icon' : 'hop-bare'} size="md" />
@@ -366,7 +372,6 @@ function SideNavInner({
               <ul className="kol-sidenav-tree flex flex-col gap-[2px]">{bottomItems.map(renderCat)}</ul>
             </nav>
           )}
-        </div>
       </div>
 
       {footer !== false && footer !== null && (