From 29aad29d59a533193c869e1d801d09130f138f35 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 21 May 2026 12:19:21 -0400
Subject: [PATCH] fix padding and header things

---
 app/globals.css                               | 20 +++++++++++++++++++
 .../[publication]/PublicationContent.tsx      | 17 +++++++++-------
 .../[did]/[publication]/PublicationHeader.tsx | 12 +++--------
 .../[publication]/PublicationHomeLayout.tsx   |  2 +-
 .../[publication]/PublicationPostItem.tsx     |  6 +++---
 .../[publication]/PublicationStickyHeader.tsx |  6 +++++-
 .../[rkey]/PublicationPageRenderer.tsx        | 18 ++++++++++-------
 7 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index e2d5a0f5..6c3c1968 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -701,3 +701,23 @@ pre.shiki {
 .toastError a {
   color: var(--color-white);
 }
+
+.pubHeaderIcon {
+  width: 40px;
+  height: 40px;
+  transition:
+    width 180ms ease-out,
+    height 180ms ease-out;
+}
+.pubHeaderTitle {
+  font-size: 22px;
+  line-height: 1.2;
+  transition: font-size 180ms ease-out;
+}
+.pubStickyHeader.header-shrunk .pubHeaderIcon {
+  width: 24px;
+  height: 24px;
+}
+.pubStickyHeader.header-shrunk .pubHeaderTitle {
+  font-size: 16px;
+}
diff --git a/app/lish/[did]/[publication]/PublicationContent.tsx b/app/lish/[did]/[publication]/PublicationContent.tsx
index 4d9ac966..424963c1 100644
--- a/app/lish/[did]/[publication]/PublicationContent.tsx
+++ b/app/lish/[did]/[publication]/PublicationContent.tsx
@@ -60,6 +60,9 @@ export const PublicationContent = ({
   fakePosts?: FakePost[];
 }) => {
   const newsletterMode = !!publication.publication_newsletter_settings?.enabled;
+  const navPages = (publication.publication_pages ?? []).filter(
+    (p) => p.record_uri,
+  );
   const posts: PublicationPostsListPost[] = fakePosts
     ? []
     : publication.documents_in_publications
@@ -90,13 +93,13 @@ export const PublicationContent = ({
         stickyHeader={
           <PublicationStickyHeader
             nav={
-              <PublicationNav
-                publicationUrl={getPublicationURL(publication)}
-                pages={(publication.publication_pages ?? []).filter(
-                  (p) => p.record_uri,
-                )}
-                activePath="/"
-              />
+              navPages.length > 0 ? (
+                <PublicationNav
+                  publicationUrl={getPublicationURL(publication)}
+                  pages={navPages}
+                  activePath="/"
+                />
+              ) : undefined
             }
           >
             <PublicationHeader
diff --git a/app/lish/[did]/[publication]/PublicationHeader.tsx b/app/lish/[did]/[publication]/PublicationHeader.tsx
index b2f3ec15..95b2e04d 100644
--- a/app/lish/[did]/[publication]/PublicationHeader.tsx
+++ b/app/lish/[did]/[publication]/PublicationHeader.tsx
@@ -11,10 +11,8 @@ export function PublicationHeader(props: {
   let variant = props.variant ?? "stacked";
   let icon = props.iconUrl ? (
     <div
-      className={`shrink-0 rounded-full${variant === "stacked" ? " mx-auto" : ""}`}
+      className={`pubHeaderIcon shrink-0 rounded-full${variant === "stacked" ? " mx-auto" : ""}`}
       style={{
-        width: "calc(40px - 16px * var(--header-shrink, 0))",
-        height: "calc(40px - 16px * var(--header-shrink, 0))",
         backgroundImage: `url(${props.iconUrl})`,
         backgroundRepeat: "no-repeat",
         backgroundPosition: "center",
@@ -24,8 +22,7 @@ export function PublicationHeader(props: {
   ) : null;
   let title = (
     <h2
-      className={`text-accent-contrast${variant === "stacked" ? " pt-1" : ""}`}
-      style={{ fontSize: "calc(22px - 6px * var(--header-shrink, 0))" }}
+      className={`pubHeaderTitle text-accent-contrast${variant === "stacked" ? " pt-1" : ""}`}
     >
       {props.publicationName}
     </h2>
@@ -42,10 +39,7 @@ export function PublicationHeader(props: {
       }}
     >
       {variant === "inline" ? (
-        <div
-          className="flex items-center justify-center"
-          style={{ gap: "calc(12px - 6px * var(--header-shrink, 0))" }}
-        >
+        <div className="flex items-center justify-center gap-3">
           {icon}
           {title}
         </div>
diff --git a/app/lish/[did]/[publication]/PublicationHomeLayout.tsx b/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
index 96a61e7d..28151805 100644
--- a/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
+++ b/app/lish/[did]/[publication]/PublicationHomeLayout.tsx
@@ -12,7 +12,7 @@ export function PublicationHomeLayout(props: {
   let inner = (
     <>
       {props.stickyHeader}
-      <div className="pubContent sm:max-w-(--page-width-units) sm:min-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pb-5">
+      <div className="pubContent sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pb-5">
         {props.children}
       </div>
     </>
diff --git a/app/lish/[did]/[publication]/PublicationPostItem.tsx b/app/lish/[did]/[publication]/PublicationPostItem.tsx
index 38a1e26c..99f3d846 100644
--- a/app/lish/[did]/[publication]/PublicationPostItem.tsx
+++ b/app/lish/[did]/[publication]/PublicationPostItem.tsx
@@ -99,7 +99,7 @@ export function PublicationPostItemMedium(props: MediumProps) {
   const hasCoverImage = !!props.coverImageSrc;
   return (
     <>
-      <div className="flex w-full gap-3 items-stretch sm:h-36">
+      <div className="flex w-full gap-3 items-stretch sm:min-h-36">
         <div className="flex w-full gap-2 grow flex-col justify-between min-w-0  pl-3 py-2">
           <PostLink href={props.href}>
             {props.title && (
@@ -117,11 +117,11 @@ export function PublicationPostItemMedium(props: MediumProps) {
           />
         </div>
         {hasCoverImage && (
-          <div className="self-stretch shrink-0 aspect-square  w-16 sm:w-36">
+          <div className="self-start shrink-0 w-16 sm:w-36">
             <img
               src={props.coverImageSrc}
               alt={props.coverImageAlt || props.title || ""}
-              className="h-full aspect-square object-cover rounded"
+              className="w-full aspect-square object-cover rounded"
             />
           </div>
         )}
diff --git a/app/lish/[did]/[publication]/PublicationStickyHeader.tsx b/app/lish/[did]/[publication]/PublicationStickyHeader.tsx
index d2bef4ad..f3608108 100644
--- a/app/lish/[did]/[publication]/PublicationStickyHeader.tsx
+++ b/app/lish/[did]/[publication]/PublicationStickyHeader.tsx
@@ -10,8 +10,10 @@ export function PublicationStickyHeader(props: {
   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;
@@ -20,6 +22,7 @@ export function PublicationStickyHeader(props: {
     let writeProgress = (target: HTMLElement) => {
       let p = Math.min(Math.max(target.scrollTop / 100, 0), 1);
       el!.style.setProperty("--header-shrink", String(p));
+      el!.classList.toggle("header-shrunk", target.scrollTop > 32);
     };
     let schedule = (target: HTMLElement) => {
       if (rafId !== null) return;
@@ -51,10 +54,11 @@ export function PublicationStickyHeader(props: {
       if (rafId !== null) cancelAnimationFrame(rafId);
       parent.removeEventListener("scroll", onScroll, true);
     };
-  }, []);
+  }, [hasNav]);
 
   useEffect(() => {
     ref.current?.style.setProperty("--header-shrink", "0");
+    ref.current?.classList.remove("header-shrunk");
   }, [pathname]);
 
   return (
diff --git a/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx b/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
index 68e3a2ca..55bb5592 100644
--- a/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
@@ -156,6 +156,10 @@ export async function PublicationPageRenderer({
     recommendsCount: 0,
   };
 
+  const navPages = (publication.publication_pages ?? []).filter(
+    (p) => p.record_uri,
+  );
+
   return (
     <DocumentProvider value={documentContextValue}>
       <LeafletContentProvider value={{ pages }}>
@@ -177,13 +181,13 @@ export async function PublicationPageRenderer({
               stickyHeader={
                 <PublicationStickyHeader
                   nav={
-                    <PublicationNav
-                      publicationUrl={getPublicationURL(publication)}
-                      pages={(publication.publication_pages ?? []).filter(
-                        (p) => p.record_uri,
-                      )}
-                      activePath={page.path}
-                    />
+                    navPages.length > 0 ? (
+                      <PublicationNav
+                        publicationUrl={getPublicationURL(publication)}
+                        pages={navPages}
+                        activePath={page.path}
+                      />
+                    ) : undefined
                   }
                 >
                   <PublicationHeader
-- 
2.51.2