From 5dd1c964fd3e8ec52214c8829d260c137a8c75d6 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 21 May 2026 14:10:40 -0400
Subject: [PATCH] fix headers

---
 .../[publication]/PublicationContent.tsx      | 77 +++++++++++--------
 .../[publication]/PublicationFullHeader.tsx   | 11 +++
 .../[publication]/PublicationStickyHeader.tsx |  6 +-
 .../[rkey]/PublicationPageRenderer.tsx        | 43 +++++++----
 .../edit/[[...route]]/layout.tsx              | 14 ++--
 5 files changed, 94 insertions(+), 57 deletions(-)
 create mode 100644 app/lish/[did]/[publication]/PublicationFullHeader.tsx

diff --git a/app/lish/[did]/[publication]/PublicationContent.tsx b/app/lish/[did]/[publication]/PublicationContent.tsx
index 424963c1..ab814557 100644
--- a/app/lish/[did]/[publication]/PublicationContent.tsx
+++ b/app/lish/[did]/[publication]/PublicationContent.tsx
@@ -4,6 +4,7 @@ import { PublicationAuthor } from "./PublicationAuthor";
 import { PublicationHeader } from "./PublicationHeader";
 import { PublicationNav } from "./PublicationNav";
 import { PublicationStickyHeader } from "./PublicationStickyHeader";
+import { PublicationFullHeader } from "./PublicationFullHeader";
 import {
   normalizePublicationRecord,
   normalizeDocumentRecord,
@@ -91,45 +92,55 @@ export const PublicationContent = ({
         uri={publication.uri}
         showPageBackground={!!showPageBackground}
         stickyHeader={
-          <PublicationStickyHeader
-            nav={
-              navPages.length > 0 ? (
+          navPages.length > 0 ? (
+            <PublicationStickyHeader
+              nav={
                 <PublicationNav
                   publicationUrl={getPublicationURL(publication)}
                   pages={navPages}
                   activePath="/"
                 />
-              ) : undefined
-            }
-          >
-            <PublicationHeader
-              iconUrl={
-                record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined
-              }
-              publicationName={publication.name}
-              description={record?.description}
-              author={
-                profile ? (
-                  <PublicationAuthor
-                    did={profile.did}
-                    displayName={profile.displayName}
-                    handle={profile.handle}
-                  />
-                ) : undefined
-              }
-              subscribeButton={
-                <div className="max-w-sm mx-auto">
-                  <SubscribeInput
-                    publicationUri={publication.uri}
-                    publicationUrl={record?.url}
-                    publicationName={record?.name ?? publication.name}
-                    publicationDescription={record?.description}
-                    newsletterMode={newsletterMode}
-                  />
-                </div>
               }
-            />
-          </PublicationStickyHeader>
+            >
+              <PublicationHeader
+                variant="inline"
+                iconUrl={
+                  record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined
+                }
+                publicationName={publication.name}
+              />
+            </PublicationStickyHeader>
+          ) : (
+            <PublicationFullHeader>
+              <PublicationHeader
+                iconUrl={
+                  record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined
+                }
+                publicationName={publication.name}
+                description={record?.description}
+                author={
+                  profile ? (
+                    <PublicationAuthor
+                      did={profile.did}
+                      displayName={profile.displayName}
+                      handle={profile.handle}
+                    />
+                  ) : undefined
+                }
+                subscribeButton={
+                  <div className="max-w-sm mx-auto">
+                    <SubscribeInput
+                      publicationUri={publication.uri}
+                      publicationUrl={record?.url}
+                      publicationName={record?.name ?? publication.name}
+                      publicationDescription={record?.description}
+                      newsletterMode={newsletterMode}
+                    />
+                  </div>
+                }
+              />
+            </PublicationFullHeader>
+          )
         }
       >
         <PublicationPostsList
diff --git a/app/lish/[did]/[publication]/PublicationFullHeader.tsx b/app/lish/[did]/[publication]/PublicationFullHeader.tsx
new file mode 100644
index 00000000..5f243c41
--- /dev/null
+++ b/app/lish/[did]/[publication]/PublicationFullHeader.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+export function PublicationFullHeader(props: { children: React.ReactNode }) {
+  return (
+    <div className="pubFullHeader shrink-0">
+      <div className="sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pt-5">
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/lish/[did]/[publication]/PublicationStickyHeader.tsx b/app/lish/[did]/[publication]/PublicationStickyHeader.tsx
index f3608108..dd653e86 100644
--- a/app/lish/[did]/[publication]/PublicationStickyHeader.tsx
+++ b/app/lish/[did]/[publication]/PublicationStickyHeader.tsx
@@ -4,16 +4,14 @@ import { usePathname } from "next/navigation";
 
 export function PublicationStickyHeader(props: {
   sticky?: boolean;
-  nav?: React.ReactNode;
+  nav: React.ReactNode;
   children: React.ReactNode;
 }) {
   let ref = useRef<HTMLDivElement>(null);
   let pathname = usePathname();
   let sticky = props.sticky ?? true;
-  let hasNav = !!props.nav;
 
   useEffect(() => {
-    if (!hasNav) return;
     let el = ref.current;
     let parent = el?.parentElement;
     if (!el || !parent) return;
@@ -54,7 +52,7 @@ export function PublicationStickyHeader(props: {
       if (rafId !== null) cancelAnimationFrame(rafId);
       parent.removeEventListener("scroll", onScroll, true);
     };
-  }, [hasNav]);
+  }, []);
 
   useEffect(() => {
     ref.current?.style.setProperty("--header-shrink", "0");
diff --git a/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx b/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
index 55bb5592..2c2bcfdd 100644
--- a/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
@@ -26,6 +26,7 @@ import { PublicationNav } from "../PublicationNav";
 import { PublicationHeader } from "../PublicationHeader";
 import { PublicationHomeLayout } from "../PublicationHomeLayout";
 import { PublicationStickyHeader } from "../PublicationStickyHeader";
+import { PublicationFullHeader } from "../PublicationFullHeader";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 
@@ -179,27 +180,39 @@ export async function PublicationPageRenderer({
               uri={publication.uri}
               showPageBackground={showPageBackground}
               stickyHeader={
-                <PublicationStickyHeader
-                  nav={
-                    navPages.length > 0 ? (
+                navPages.length > 0 ? (
+                  <PublicationStickyHeader
+                    nav={
                       <PublicationNav
                         publicationUrl={getPublicationURL(publication)}
                         pages={navPages}
                         activePath={page.path}
                       />
-                    ) : undefined
-                  }
-                >
-                  <PublicationHeader
-                    iconUrl={
-                      normalizedPublication?.icon
-                        ? blobRefToSrc(normalizedPublication.icon.ref, did)
-                        : undefined
                     }
-                    publicationName={publication.name}
-                    description={normalizedPublication?.description}
-                  />
-                </PublicationStickyHeader>
+                  >
+                    <PublicationHeader
+                      variant="inline"
+                      iconUrl={
+                        normalizedPublication?.icon
+                          ? blobRefToSrc(normalizedPublication.icon.ref, did)
+                          : undefined
+                      }
+                      publicationName={publication.name}
+                    />
+                  </PublicationStickyHeader>
+                ) : (
+                  <PublicationFullHeader>
+                    <PublicationHeader
+                      iconUrl={
+                        normalizedPublication?.icon
+                          ? blobRefToSrc(normalizedPublication.icon.ref, did)
+                          : undefined
+                      }
+                      publicationName={publication.name}
+                      description={normalizedPublication?.description}
+                    />
+                  </PublicationFullHeader>
+                )
               }
             >
               <div className="pubPageContent pt-6">
diff --git a/app/lish/[did]/[publication]/edit/[[...route]]/layout.tsx b/app/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
index 7e2b6e49..0aa90e49 100644
--- a/app/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
+++ b/app/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
@@ -97,7 +97,15 @@ export default async function PublicationEditLayout(props: {
             publicationName={params.publication}
           />
           <div className="pubWrapper flex flex-col grow min-h-0 bg-bg-page rounded-t-lg overflow-hidden">
-            <PublicationStickyHeader sticky={false}>
+            <PublicationStickyHeader
+              sticky={false}
+              nav={
+                <PublicationPagesNav
+                  did={params.did}
+                  publicationName={params.publication}
+                />
+              }
+            >
               <PublicationHeader
                 variant="inline"
                 iconUrl={iconUrl}
@@ -105,10 +113,6 @@ export default async function PublicationEditLayout(props: {
                 description={record?.description}
               />
             </PublicationStickyHeader>
-            <PublicationPagesNav
-              did={params.did}
-              publicationName={params.publication}
-            />
             <div className="grow min-h-0 flex flex-col">{props.children}</div>
           </div>
         </div>
-- 
2.51.2