feat: show active staking banner in mobile post page, and make the on…

…e in space sticky

src/components/posts/view-post/PostPage.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import { NextPage } from 'next'
 import router from 'next/router'
 import { FC, useEffect } from 'react'
+import MobileStakerRewardDashboard from 'src/components/creators/MobileStakerRewardDashboard'
 import { PageContent } from 'src/components/main/PageWrapper'
 import AuthorCard from 'src/components/profiles/address-views/AuthorCard'
 import { useResponsiveSize } from 'src/components/responsive'
@@ -48,7 +49,7 @@ export type PostDetailsProps = {
 const InnerPostPage: NextPage<PostDetailsProps> = props => {
   const { postData: initialPostData, rootPostData } = props
   const id = initialPostData.id
-  const { isNotMobile } = useResponsiveSize()
+  const { isNotMobile, isMobile } = useResponsiveSize()
   useFetchMyReactionsByPostId(id)
 
   const postData = useAppSelector(state => selectPost(state, { id })) || initialPostData
@@ -158,6 +159,11 @@ const InnerPostPage: NextPage<PostDetailsProps> = props => {
       withVoteBanner
       creatorDashboardSidebarType={{ name: 'post-page', space }}
     >
+      {isMobile && (
+        <MobileStakerRewardDashboard
+          style={{ margin: '-12px -16px 0', position: 'sticky', top: '64px', zIndex: 10 }}
+        />
+      )}
       <HiddenPostAlert post={post.struct} />
       <Section>
         <div>

src/components/spaces/ViewSpace.tsx

@@ -296,7 +296,11 @@ export const InnerViewSpace = (props: Props) => {
 
   return (
     <Section className='mt-3'>
-      {showCreatorCards && <MobileStakerRewardDashboard style={{ margin: '-28px -16px 0' }} />}
+      {showCreatorCards && (
+        <MobileStakerRewardDashboard
+          style={{ margin: '-28px -16px 0', position: 'sticky', top: '64px', zIndex: 10 }}
+        />
+      )}
       <PendingSpaceOwnershipPanel space={space} />
       <HiddenSpaceAlert space={space} />
       <Section className='pt-2'>{renderPreview()}</Section>