From 19a0387becc1124bab9d57fd0e8974735acb8338 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Mon, 1 Jun 2026 15:09:18 -0400
Subject: [PATCH] tweak pages nav

---
 .../edit/[[...route]]/PublicationPageLeaflet.tsx |  4 ++--
 .../edit/[[...route]]/PublicationPagesNav.tsx    |  2 +-
 .../[publication]/edit/[[...route]]/layout.tsx   | 12 ++++++------
 components/LeafletLayout.tsx                     | 14 ++++++++++----
 components/Pages/Page.tsx                        | 16 +++++++++++-----
 components/Pages/index.tsx                       | 15 ++++++++++-----
 6 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPageLeaflet.tsx b/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPageLeaflet.tsx
index d601e461..aa0230f6 100644
--- a/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPageLeaflet.tsx
+++ b/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPageLeaflet.tsx
@@ -51,8 +51,8 @@ export function PublicationPageLeaflet(props: {
               path={props.pagePath}
               title={props.pageTitle}
             />
-            <LeafletLayout className="!pb-6">
-              <Pages rootPage={props.leaflet_id} />
+            <LeafletLayout flow className="!pb-6">
+              <Pages rootPage={props.leaflet_id} flow />
             </LeafletLayout>
           </PublicationBackgroundProvider>
         </PublicationThemeProvider>
diff --git a/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPagesNav.tsx b/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPagesNav.tsx
index 2b81b227..625996f2 100644
--- a/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPagesNav.tsx
+++ b/app/(app)/lish/[did]/[publication]/edit/[[...route]]/PublicationPagesNav.tsx
@@ -129,7 +129,7 @@ export function PublicationPagesNav(props: {
   }
 
   return (
-    <nav className="publicationPagesNav border-t border-b border-border-light shrink-0 w-full sm:max-w-[calc(var(--page-width-units)*1.25)] mx-auto">
+    <nav className="publicationPagesNav sticky top-0 z-10 bg-bg-page border-t border-b border-border-light shrink-0 w-full sm:max-w-[calc(var(--page-width-units)*1.25)] mx-auto">
       <div className="flex items-center gap-2 px-3 sm:px-4 py-2 overflow-x-auto w-full sm:max-w-(--page-width-units) mx-auto">
         <div className="flex items-center gap-1 grow min-w-0 overflow-x-auto">
           <DndContext
diff --git a/app/(app)/lish/[did]/[publication]/edit/[[...route]]/layout.tsx b/app/(app)/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
index a262e887..d006d336 100644
--- a/app/(app)/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
+++ b/app/(app)/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
@@ -97,7 +97,7 @@ export default async function PublicationEditLayout(props: {
               did={params.did}
               publicationName={params.publication}
             />
-            <div className="pubWrapper flex flex-col grow min-h-0 bg-bg-page rounded-t-lg overflow-hidden">
+            <div className="pubWrapper publicationScrollContainer flex flex-col grow min-h-0 bg-bg-page rounded-t-lg overflow-y-auto">
               <div className="shrink-0">
                 <div className="sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pt-5">
                   <PublicationHeader
@@ -107,12 +107,12 @@ export default async function PublicationEditLayout(props: {
                     description={record?.description}
                   />
                 </div>
-                <PublicationPagesNav
-                  did={params.did}
-                  publicationName={params.publication}
-                />
               </div>
-              <div className="grow min-h-0 flex flex-col">{props.children}</div>
+              <PublicationPagesNav
+                did={params.did}
+                publicationName={params.publication}
+              />
+              <div className="flex flex-col">{props.children}</div>
             </div>
           </div>
         </PublicationThemeProviderDashboard>
diff --git a/components/LeafletLayout.tsx b/components/LeafletLayout.tsx
index ff43de2f..b0b30f3b 100644
--- a/components/LeafletLayout.tsx
+++ b/components/LeafletLayout.tsx
@@ -1,24 +1,30 @@
 export const LeafletLayout = (props: {
   children: React.ReactNode;
   className?: string;
+  // In flow mode the layout does NOT create its own scroll container: it sizes
+  // to its content height so an ancestor (e.g. the publication edit layout) can
+  // be the single vertical scroller. See app/(app)/lish/.../edit/layout.tsx.
+  flow?: boolean;
 }) => {
   return (
     <div
       className={`
         leafetLayout
-        w-full h-full relative
+        w-full relative
         mx-auto pwa-padding
-        flex items-stretch  grow`}
+        flex items-stretch
+        ${props.flow ? "" : "h-full grow"}`}
       id="page-carousel"
     >
       {/* if you adjust this padding, remember to adjust the negative margins on page in components/Pages/Page.tsx in pageScrollWrapper when card borders are hidden */}
       <div
         id="pages"
         className={`pagesWrapper
-          w-full h-full
+          w-full
           flex gap-0
           py-2 sm:py-6
-          overflow-y-hidden overflow-x-scroll snap-x snap-mandatory no-scrollbar
+          no-scrollbar
+          ${props.flow ? "justify-center" : "h-full overflow-y-hidden overflow-x-scroll snap-x snap-mandatory"}
           ${props.className}`}
       >
         {props.children}
diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx
index b8b0c10e..efc0a1d1 100644
--- a/components/Pages/Page.tsx
+++ b/components/Pages/Page.tsx
@@ -29,6 +29,7 @@ export function Page(props: {
   entityID: string;
   first?: boolean;
   fullPageScroll: boolean;
+  flow?: boolean;
 }) {
   let { rep } = useReplicache();
   let publicationPage = useLeafletPublicationPage();
@@ -67,6 +68,7 @@ export function Page(props: {
           drawerOpen={!!drawerOpen}
           isFocused={isFocused}
           fullPageScroll={props.fullPageScroll}
+          flow={props.flow}
           pageType={pageType}
           pageOptions={
             <PageOptions
@@ -102,6 +104,9 @@ export const PageWrapper = (props: {
   pageOptions?: React.ReactNode;
   footnoteSideColumn?: React.ReactNode;
   fullPageScroll: boolean;
+  // In flow mode the page does NOT scroll internally and sizes to its content
+  // height, so an ancestor can be the single vertical scroller.
+  flow?: boolean;
   isFocused?: boolean;
   onClickAction?: (e: React.MouseEvent) => void;
   pageType: "canvas" | "doc";
@@ -116,7 +121,7 @@ export const PageWrapper = (props: {
     // this div wraps the contents AND the page options.
     // it needs to be its own div because this container does NOT scroll, and therefore doesn't clip the absolutely positioned pageOptions
     <div
-      className={`pageWrapper relative shrink-0 h-full ${props.fullPageScroll ? "w-full" : "w-max"}`}
+      className={`pageWrapper relative shrink-0 ${props.flow ? "" : "h-full"} ${props.fullPageScroll ? "w-full" : "w-max"}`}
     >
       {/*
         this div is the scrolling container that wraps only the contents div.
@@ -132,15 +137,16 @@ export const PageWrapper = (props: {
       publicationScrollContainer
       grow
       shrink-0 snap-center
-      ${props.overflow === "hidden" ? "overflow-hidden" : "overflow-y-scroll"}
+      ${props.flow ? "" : props.overflow === "hidden" ? "overflow-hidden" : "overflow-y-scroll"}
       ${
         !cardBorderHidden &&
-        `h-full border
+        `border
           bg-[rgba(var(--bg-page),var(--bg-page-alpha))]
+          ${props.flow ? "" : "h-full"}
           ${props.drawerOpen ? "rounded-l-lg " : "rounded-lg"}
           ${props.isFocused ? "shadow-md border-border" : "border-border-light"}`
       }
-      ${cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"}
+      ${cardBorderHidden && (props.flow ? "sm:pt-6 pt-3" : "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3")}
       ${props.fullPageScroll && "max-w-full "}
     ${props.pageType === "doc" && !props.fullPageScroll ? (props.fixedWidth ? "w-[10000px] sm:max-w-prose max-w-[var(--page-width-units)]" : "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]") : ""}
     ${
@@ -153,7 +159,7 @@ export const PageWrapper = (props: {
       >
         <div
           className={`postPageContent footnote-scope
-          ${props.fullPageScroll ? "sm:max-w-[var(--page-width-units)] mx-auto" : "w-full h-full"}
+          ${props.fullPageScroll ? "sm:max-w-[var(--page-width-units)] mx-auto" : `w-full ${props.flow ? "" : "h-full"}`}
         `}
         >
           {props.children}
diff --git a/components/Pages/index.tsx b/components/Pages/index.tsx
index e9c663df..d675cb2e 100644
--- a/components/Pages/index.tsx
+++ b/components/Pages/index.tsx
@@ -15,7 +15,7 @@ import { PageOptionButton } from "./PageOptions";
 import { CloseTiny } from "components/Icons/CloseTiny";
 import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded";
 
-export function Pages(props: { rootPage: string }) {
+export function Pages(props: { rootPage: string; flow?: boolean }) {
   let rootPage = useEntity(props.rootPage, "root/page")[0];
   let pages = useUIState((s) => s.openPages);
   let params = useSearchParams();
@@ -29,7 +29,7 @@ export function Pages(props: { rootPage: string }) {
   return (
     <>
       <LeafletSidebar />
-      {!fullPageScroll && (
+      {!fullPageScroll && !props.flow && (
         <BookendSpacer
           onClick={(e) => {
             e.currentTarget === e.target && blurPage();
@@ -37,7 +37,12 @@ export function Pages(props: { rootPage: string }) {
         />
       )}
 
-      <Page entityID={firstPage} first fullPageScroll={fullPageScroll} />
+      <Page
+        entityID={firstPage}
+        first
+        fullPageScroll={fullPageScroll}
+        flow={props.flow}
+      />
       {pages.map((page) => {
         let key = getEditorPageKey(page);
         if (typeof page === "object") {
@@ -87,11 +92,11 @@ export function Pages(props: { rootPage: string }) {
                 e.currentTarget === e.target && blurPage();
               }}
             />
-            <Page entityID={page} fullPageScroll={false} />
+            <Page entityID={page} fullPageScroll={false} flow={props.flow} />
           </React.Fragment>
         );
       })}
-      {!fullPageScroll && (
+      {!fullPageScroll && !props.flow && (
         <BookendSpacer
           onClick={(e) => {
             e.currentTarget === e.target && blurPage();
-- 
2.51.2