seemore 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Let AI write the Markdown. Let seemore show it better — see any folder of Markdown rendered in your browser, zero config.",
   "license": "MIT",
   "type": "module",

package/src/app/layout/Sidebar.tsx

@@ -81,9 +81,14 @@ export function Sidebar({ children }: { children?: ReactNode }) {
 
       <div className="seemore-sidebar-column" data-open={open}>
         <aside className="seemore-sidebar" aria-label="Documentation navigation">
-          <SidebarViewport>{rendered}</SidebarViewport>
+          {/* `toc.integrate` passes the table of contents as children: it belongs inside the
+              viewport, so nav and TOC scroll together rather than the TOC sitting below a
+              scroll container that has already claimed the column's whole height. */}
+          <SidebarViewport>
+            {rendered}
+            {children}
+          </SidebarViewport>
         </aside>
-        {children}
       </div>
     </>
   );

package/src/app/styles/globals.css

@@ -83,8 +83,10 @@
     @apply mx-auto flex w-full max-w-[1400px] flex-1;
   }
 
+  /* The scroll container is the viewport `SidebarViewport` renders, which sizes itself with
+     `flex-1 min-h-0` — so this has to be the flex column that gives it a bounded height. */
   .seemore-sidebar {
-    @apply h-full;
+    @apply flex min-h-0 flex-1 flex-col;
   }
 
   .seemore-sidebar-link {
@@ -117,8 +119,10 @@
   }
 
   .seemore-sidebar-column {
-    /* `pt-20` clears the sticky header, which sits above the drawer. */
-    @apply fixed inset-y-0 start-0 z-40 w-72 -translate-x-full overflow-y-auto border-e border-fd-border bg-fd-background px-4 pt-20 pb-4 transition-transform rtl:translate-x-full;
+    /* `pt-20` clears the sticky header, which sits above the drawer. Height is definite in both
+       modes — the drawer via `inset-y-0`, the rail via `md:h-[calc(100vh-4rem)]` — so the nav
+       scrolls inside itself rather than overflowing a column that cannot scroll. */
+    @apply fixed inset-y-0 start-0 z-40 flex w-72 -translate-x-full flex-col border-e border-fd-border bg-fd-background px-4 pt-20 pb-4 transition-transform rtl:translate-x-full;
     @apply md:sticky md:top-16 md:z-auto md:h-[calc(100vh-4rem)] md:w-64 md:translate-x-0 md:px-2 md:py-6 rtl:md:translate-x-0;
   }
 
@@ -134,6 +138,24 @@
     @apply mx-auto min-w-0 max-w-3xl flex-1 px-4 py-8 md:px-8;
   }
 
+  /* Docs are full of long identifiers — `EmbeddedPaymentsController`,
+     `Service::createIntent()` — and each is one unbreakable word. On a phone a single such
+     word is wider than the column, and an overflowing heading or inline code drags a
+     horizontal scrollbar onto the whole page. Fenced blocks are exempt: they get their own
+     scroller from fumadocs, and breaking code mid-line there would be a lie. */
+  .seemore-article :is(h1, h2, h3, h4, h5, h6),
+  .seemore-article :not(pre) > code {
+    @apply break-words;
+  }
+
+  /* fumadocs renders a heading as a flex row — the link, then the copy-anchor button — and a
+     flex item defaults to `min-width: auto`, so the link floors at the width of its longest
+     word and `break-words` above never gets to act. `min-w-0` lets it shrink so the break
+     can happen. */
+  .seemore-article :is(h1, h2, h3, h4, h5, h6) > * {
+    @apply min-w-0;
+  }
+
   .seemore-toc {
     @apply sticky top-16 hidden h-[calc(100vh-4rem)] flex-col w-56 shrink-0 py-8 pe-4 text-sm lg:flex xl:pe-8;
   }