From 6f4be218c14077a7c65eac41bcd4ef7ce7ac9056 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 12 Dec 2025 07:33:49 -0500
Subject: [PATCH] sticky header for tabs in profile page

---
 .../[didOrHandle]/(profile)/ProfileHeader.tsx |  4 +-
 app/p/[didOrHandle]/(profile)/ProfileTabs.tsx | 49 ++++++++++---------
 app/p/[didOrHandle]/(profile)/layout.tsx      |  5 +-
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx b/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
index 0671605a..c0e1a14c 100644
--- a/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
+++ b/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
@@ -15,7 +15,7 @@ export const ProfileHeader = (props: {
   let profileRecord = props.profile.record as AppBskyActorProfile.Record;
 
   return (
-    <>
+    <div className="flex flex-col" id="profile-header">
       <Avatar
         src={
           profileRecord.avatar?.ref &&
@@ -51,7 +51,7 @@ export const ProfileHeader = (props: {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx b/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
index 06e1753d..35d5f168 100644
--- a/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
+++ b/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
@@ -11,16 +11,18 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
   const cardBorderHidden = useCardBorderHidden();
   const segment = useSelectedLayoutSegment();
   const currentTab = (segment || "posts") as ProfileTabType;
-  const [scrollPos, setScrollPos] = useState(0);
+  const [scrollPosWithinTabContent, setScrollPosWithinTabContent] = useState(0);
+  const [headerHeight, setHeaderHeight] = useState(0);
 
   useEffect(() => {
-    const profileContent = document.querySelector(
-      ".overflow-y-scroll",
-    ) as HTMLElement;
+    let headerHeight =
+      document.getElementById("profile-header")?.clientHeight || 0;
+    setHeaderHeight(headerHeight);
 
+    const profileContent = document.getElementById("profile-content");
     const handleScroll = () => {
       if (profileContent) {
-        setScrollPos(profileContent.scrollTop);
+        setScrollPosWithinTabContent(profileContent.scrollTop - headerHeight);
       }
     };
 
@@ -31,38 +33,41 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
   }, []);
 
   const baseUrl = `/p/${props.didOrHandle}`;
-  const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
+  const bgColor = !cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
+  console.log(scrollPosWithinTabContent);
 
   return (
-    <div className="flex flex-col w-full sticky top-3 sm:top-4 z-10">
+    <div className="flex flex-col w-full sticky top-3 sm:top-4 z-10 sm:px-4 px-3">
       <div
         style={
-          scrollPos < 20
-            ? {
-                paddingLeft: `calc(${scrollPos / 20} * 12px + 12px)`,
-                paddingRight: `calc(${scrollPos / 20} * 12px + 12px)`,
-              }
-            : { paddingLeft: "24px", paddingRight: "24px" }
+          scrollPosWithinTabContent < 0
+            ? { paddingLeft: "0", paddingRight: "0" }
+            : scrollPosWithinTabContent > 0 && scrollPosWithinTabContent < 20
+              ? {
+                  paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
+                  paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
+                }
+              : { paddingLeft: "12px", paddingRight: "12px" }
         }
       >
         <div
           className={`
             border rounded-lg
-            ${scrollPos > 20 ? "border-border-light" : "border-transparent"}
+            ${scrollPosWithinTabContent > 20 ? "border-border-light" : "border-transparent"}
             py-1
             w-full `}
           style={
-            scrollPos < 20
+            scrollPosWithinTabContent < 20
               ? {
-                  backgroundColor: cardBorderHidden
-                    ? `rgba(${bgColor}, ${scrollPos / 60 + 0.75})`
-                    : `rgba(${bgColor}, ${scrollPos / 20})`,
-                  paddingLeft: cardBorderHidden
+                  backgroundColor: !cardBorderHidden
+                    ? `rgba(${bgColor}, ${scrollPosWithinTabContent / 60 + 0.75})`
+                    : `rgba(${bgColor}, ${scrollPosWithinTabContent / 20})`,
+                  paddingLeft: !cardBorderHidden
                     ? "4px"
-                    : `calc(${scrollPos / 20} * 4px)`,
-                  paddingRight: cardBorderHidden
+                    : `calc(${scrollPosWithinTabContent / 20} * 4px)`,
+                  paddingRight: !cardBorderHidden
                     ? "4px"
-                    : `calc(${scrollPos / 20} * 4px)`,
+                    : `calc(${scrollPosWithinTabContent / 20} * 4px)`,
                 }
               : {
                   backgroundColor: `rgb(${bgColor})`,
diff --git a/app/p/[didOrHandle]/(profile)/layout.tsx b/app/p/[didOrHandle]/(profile)/layout.tsx
index a966b7f8..ec87a7a8 100644
--- a/app/p/[didOrHandle]/(profile)/layout.tsx
+++ b/app/p/[didOrHandle]/(profile)/layout.tsx
@@ -57,7 +57,10 @@ export default async function ProfileLayout(props: {
         >
           <ProfileHeader profile={profile} publications={publications || []} />
           <ProfileTabs didOrHandle={params.didOrHandle} />
-          <div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
+          <div
+            className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col"
+            id="profileContent"
+          >
             {props.children}
           </div>
         </div>
-- 
2.51.2