From d42ce4c9c546407191caf4c5aa3367fde1b0970e Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 12 Dec 2025 07:43:18 -0500
Subject: [PATCH] simplied the scroll logic, fixed a boo boo

---
 app/p/[didOrHandle]/(profile)/ProfileTabs.tsx | 23 +++++++++++--------
 app/p/[didOrHandle]/(profile)/layout.tsx      |  6 ++---
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx b/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
index 35d5f168..95f30b56 100644
--- a/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
+++ b/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
@@ -22,9 +22,15 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
     const profileContent = document.getElementById("profile-content");
     const handleScroll = () => {
       if (profileContent) {
-        setScrollPosWithinTabContent(profileContent.scrollTop - headerHeight);
+        setScrollPosWithinTabContent(
+          profileContent.scrollTop - headerHeight > 0
+            ? profileContent.scrollTop - headerHeight
+            : 0,
+        );
       }
     };
+    console.log("content: " + profileContent);
+    console.log("header: " + headerHeight);
 
     if (profileContent) {
       profileContent.addEventListener("scroll", handleScroll);
@@ -34,20 +40,19 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
 
   const baseUrl = `/p/${props.didOrHandle}`;
   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 sm:px-4 px-3">
       <div
         style={
-          scrollPosWithinTabContent < 0
-            ? { paddingLeft: "0", paddingRight: "0" }
-            : scrollPosWithinTabContent > 0 && scrollPosWithinTabContent < 20
-              ? {
-                  paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
-                  paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
-                }
-              : { paddingLeft: "12px", paddingRight: "12px" }
+          scrollPosWithinTabContent < 20
+            ? {
+                paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
+                paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
+              }
+            : { paddingLeft: "12px", paddingRight: "12px" }
         }
       >
         <div
diff --git a/app/p/[didOrHandle]/(profile)/layout.tsx b/app/p/[didOrHandle]/(profile)/layout.tsx
index ec87a7a8..f2cc4449 100644
--- a/app/p/[didOrHandle]/(profile)/layout.tsx
+++ b/app/p/[didOrHandle]/(profile)/layout.tsx
@@ -48,6 +48,7 @@ export default async function ProfileLayout(props: {
     <ProfileDashboardLayout did={did}>
       <div className="h-full">
         <div
+          id="profile-content"
           className={`
           max-w-prose mx-auto w-full h-full
           flex flex-col
@@ -57,10 +58,7 @@ 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"
-            id="profileContent"
-          >
+          <div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
             {props.children}
           </div>
         </div>
-- 
2.51.2