From d2089d3f2535003f7aecff901c3ef1f1cb31f53f Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Tue, 6 Feb 2024 02:17:40 +0700
Subject: [PATCH 1/2] fix: remove unnecessary js conditional rendering

---
 src/components/main/PageWrapper.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx
index 0a36260c0..886da23a6 100644
--- a/src/components/main/PageWrapper.tsx
+++ b/src/components/main/PageWrapper.tsx
@@ -202,11 +202,9 @@ export const PageContent: FC<Props> = ({
           {rightPanel === undefined && creatorDashboardSidebarType && (
             <div {...sidebarStyles}>
               <CreatorDashboardSidebar dashboardType={creatorDashboardSidebarType} />
-              {!isLargeDesktop && (
-                <div className='mt-3 xl-hidden'>
-                  <TopUsersCard />
-                </div>
-              )}
+              <div className='mt-3 xl-hidden'>
+                <TopUsersCard />
+              </div>
               {/* <OnBoardingSidebar hideOnBoardingSidebar={() => setShowOnBoardingSidebar(false)} /> */}
             </div>
           )}

From fb31b1acff9224d080c42e82be2904337e37bb7e Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Tue, 6 Feb 2024 02:24:29 +0700
Subject: [PATCH 2/2] fix: hydration issue, making top users card skeleton
 rendering weirdly

---
 src/components/main/PageWrapper.tsx | 7 +++----
 src/styles/subsocial.scss           | 6 ++++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx
index 886da23a6..54cf22439 100644
--- a/src/components/main/PageWrapper.tsx
+++ b/src/components/main/PageWrapper.tsx
@@ -11,7 +11,7 @@ import CreatorDashboardSidebar, {
 } from '../creators/CreatorDashboardSidebar'
 import TopUsersCard from '../creators/TopUsersCard'
 import ProgressModal from '../leaderboard/ProgressModal'
-import { useIsMobileWidthOrDevice, useResponsiveSize } from '../responsive'
+import { useIsMobileWidthOrDevice } from '../responsive'
 import { fullUrl } from '../urls/helpers'
 import Section from '../utils/Section'
 
@@ -125,7 +125,6 @@ export const PageContent: FC<Props> = ({
   // const myAddress = useMyAddress()
 
   const isMobile = useIsMobileWidthOrDevice()
-  const { isLargeDesktop } = useResponsiveSize()
   // const isPanels = leftPanel || rightPanel
 
   const sidebarStyles: ComponentProps<'div'> = {
@@ -155,8 +154,8 @@ export const PageContent: FC<Props> = ({
         </section>
       ) : (
         <div className={clsx('DfSectionOuterContainer')}>
-          {creatorDashboardSidebarType && isLargeDesktop && (
-            <div {...sidebarStyles}>
+          {creatorDashboardSidebarType && (
+            <div {...sidebarStyles} className='xl-only'>
               <div>
                 <TopUsersCard />
               </div>
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
index 904e06423..62536a752 100644
--- a/src/styles/subsocial.scss
+++ b/src/styles/subsocial.scss
@@ -2264,10 +2264,16 @@ hr {
   }
 }
 
+.xl-only {
+  display: none;
+}
 @media screen and (min-width: 1200px) {
   .xl-hidden {
     display: none !important;
   }
+  .xl-only {
+    display: block;
+  }
 }
 
 .\!FontTiny {