From 514e8a62d3251b30e14d06e49e0b8a31223de538 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Tue, 23 Jan 2024 01:50:03 +0700
Subject: [PATCH 1/2] fix: flickering of top users card in right panel

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

diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx
index 6c9e3dd37..3f91f517e 100644
--- a/src/components/main/PageWrapper.tsx
+++ b/src/components/main/PageWrapper.tsx
@@ -187,7 +187,7 @@ export const PageContent: FC<Props> = ({
             <div {...sidebarStyles}>
               <CreatorDashboardSidebar dashboardType={creatorDashboardSidebarType} />
               {!isLargeDesktop && (
-                <div className='mt-3'>
+                <div className='mt-3 xl-hidden'>
                   <TopUsersCard />
                 </div>
               )}
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
index 9e372315d..94989f4a4 100644
--- a/src/styles/subsocial.scss
+++ b/src/styles/subsocial.scss
@@ -2239,6 +2239,12 @@ hr {
   }
 }
 
+@media screen and (min-width: 1200px) {
+  .xl-hidden {
+    display: none !important;
+  }
+}
+
 .\!FontTiny {
   font-size: $font_tiny !important;
 }

From 0e46b52340063fd14b13cfe26f227ee4158fae71 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Tue, 23 Jan 2024 01:53:23 +0700
Subject: [PATCH 2/2] fix: overflow of long names of users in top users card

---
 src/components/creators/TopUsersCard.tsx | 3 +++
 src/components/spaces/ViewSpaceLink.tsx  | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/creators/TopUsersCard.tsx b/src/components/creators/TopUsersCard.tsx
index a890e993a..393cc4fa8 100644
--- a/src/components/creators/TopUsersCard.tsx
+++ b/src/components/creators/TopUsersCard.tsx
@@ -119,6 +119,9 @@ function UserInfo({
       </div>
       <div className='d-flex flex-column' style={{ minWidth: 0 }}>
         <ViewSpaceLink
+          containerClassName='d-flex'
+          className='d-flex'
+          style={{ minWidth: 0 }}
           title={
             <span
               className='FontWeightMedium FontNormal'
diff --git a/src/components/spaces/ViewSpaceLink.tsx b/src/components/spaces/ViewSpaceLink.tsx
index 210b4358b..9301fdc95 100644
--- a/src/components/spaces/ViewSpaceLink.tsx
+++ b/src/components/spaces/ViewSpaceLink.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import { SpaceStruct } from 'src/types'
 import { spaceUrl } from '../urls'
 
@@ -9,22 +9,25 @@ type Props = {
   hint?: string
   className?: string
   containerClassName?: string
+  style?: CSSProperties
+  containerStyle?: CSSProperties
 }
 
 export const ViewSpaceLink = React.memo(
-  ({ space, title, hint, className, containerClassName }: Props) => {
+  ({ space, title, hint, className, containerClassName, containerStyle, style }: Props) => {
     if (!space.id || !title) return null
 
     return (
       <span
         className={containerClassName}
+        style={containerStyle}
         onClick={e => {
           e.stopPropagation()
           e.preventDefault()
         }}
       >
         <Link href='/[spaceId]' as={spaceUrl(space)}>
-          <a className={'DfBlackLink ' + className} title={hint}>
+          <a className={'DfBlackLink ' + className} style={style} title={hint}>
             {title}
           </a>
         </Link>