fixed profile home tab scroll

DA0-DA0 · Apr 21, 2024 · b06f035 · b06f035
1 parent cd46ef2
commit b06f035
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/packages/stateless/hooks/useTabBarScrollReset.ts b/packages/stateless/hooks/useTabBarScrollReset.ts
@@ -9,6 +9,10 @@ export type UseTabBarScrollResetOptions = {
    * The selected tab.
    */
   selectedTabId: string
+  /**
+   * Optionally offset the scroll.
+   */
+  scrollOffset?: number
 }
 
 export type UseTabBarScrollResetReturn = {
@@ -31,6 +35,7 @@ export type UseTabBarScrollResetReturn = {
  */
 export const useTabBarScrollReset = ({
   selectedTabId,
+  scrollOffset = 0,
 }: UseTabBarScrollResetOptions): UseTabBarScrollResetReturn => {
   const pageHeaderRef = useAppContextIfAvailable()?.pageHeaderRef
 
@@ -74,10 +79,16 @@ export const useTabBarScrollReset = ({
       top:
         tabContainerRef.current.offsetTop +
         scrollableParentPaddingTop -
-        tabBarRect.height,
+        tabBarRect.height +
+        scrollOffset,
       behavior: 'smooth',
     })
-  }, [pageHeaderRef, selectedTabId])
+
+    // Only scroll when tab changes (i.e. changes in scrollOffset should only
+    // take effect after a tab change).
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTabId])
 
   return {
     tabBarRef,

diff --git a/packages/stateless/pages/ProfileHome.tsx b/packages/stateless/pages/ProfileHome.tsx
@@ -60,6 +60,18 @@ export const ProfileHome = ({
   // Auto scroll to top of tab on change.
   const { tabBarRef, tabContainerRef } = useTabBarScrollReset({
     selectedTabId,
+    // On mobile, account for top margin of container. The offsets correspond to
+    // the margins set by `UNDO_PAGE_PADDING_TOP_CLASSES`.
+    scrollOffset:
+      typeof window !== 'undefined'
+        ? // Below the `sm` tailwind selector, the smaller margin takes effect (-mt-6).
+          window.innerWidth < 640
+          ? -24
+          : // Above `sm` and below the `md` tailwind selector, the larger margin takes effect (sm:-mt-10).
+          window.innerWidth < 768
+          ? -40
+          : undefined
+        : undefined,
   })
 
   return (
@@ -103,9 +115,7 @@ export const ProfileHome = ({
       {/* Don't render a tab unless visible. */}
       {selectedTab && (
         <div
-          className={clsx(
-            'grow flex flex-col justify-start items-stretch pb-4 pt-6'
-          )}
+          className="grow flex flex-col justify-start items-stretch pb-4 pt-6"
           ref={tabContainerRef}
         >
           <WalletActionsProvider