From 54867d7eb1f1a3f8b5f9f816b2e1e6a7dec72b7e Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Thu, 8 Sep 2022 20:35:24 +0200
Subject: [PATCH] fix style

---
 packages/app/src/pages/account/index.jsx  | 6 +++++-
 packages/app/src/pages/account/index.less | 6 ++++--
 packages/app/src/pages/home/index.jsx     | 6 ++----
 packages/app/src/pages/home/index.less    | 5 +++++
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/pages/account/index.jsx b/packages/app/src/pages/account/index.jsx
index b340f73a..2fab6148 100644
--- a/packages/app/src/pages/account/index.jsx
+++ b/packages/app/src/pages/account/index.jsx
@@ -90,6 +90,8 @@ export default class Account extends React.Component {
 		isNotExistent: false,
 	}
 
+	contentRef = React.createRef()
+
 	coverComponent = React.createRef()
 
 	api = window.app.api.withEndpoints("main")
@@ -201,8 +203,10 @@ export default class Account extends React.Component {
 		// if component scrolled foward set cover height to 0
 		if (e.target.scrollTop > 0) {
 			this.coverComponent.current.style.height = "0px"
+			this.contentRef.current.style.height = "100vh"
 		} else {
 			this.coverComponent.current.style.height = ""
+			this.contentRef.current.style.height = ""
 		}
 	}
 
@@ -271,7 +275,7 @@ export default class Account extends React.Component {
 				</div>
 			</div>
 
-			<div className="contents" onScroll={this.handleScroll}>
+			<div ref={this.contentRef} className="contents" onScroll={this.handleScroll}>
 				<div className="tabMenuWrapper">
 					<antd.Menu
 						className="tabMenu"
diff --git a/packages/app/src/pages/account/index.less b/packages/app/src/pages/account/index.less
index 778105a2..732b8396 100644
--- a/packages/app/src/pages/account/index.less
+++ b/packages/app/src/pages/account/index.less
@@ -178,13 +178,15 @@
 		grid-row-gap: 0px;
 
 		width: 100%;
-		height: 100vh;
+		height: 65vh;
 	
 		overflow: hidden;
 		overflow-y: overlay;
 
 		margin-top: -1.5vh;
-		
+
+		transition: all 0.3s ease-in-out;
+
 		.tabContent {
 			position: sticky;
 			border-radius: @borderRadius;
diff --git a/packages/app/src/pages/home/index.jsx b/packages/app/src/pages/home/index.jsx
index 30cbfeda..7a8b42db 100644
--- a/packages/app/src/pages/home/index.jsx
+++ b/packages/app/src/pages/home/index.jsx
@@ -103,10 +103,8 @@ export default class Dashboard extends React.Component {
                 </div>
 
                 <div className="card" id="trendings">
-                    <div>
-                        <h2><Icons.TrendingUp /> Trendings</h2>
-                        <HashtagTrendings />
-                    </div>
+                    <h2><Icons.TrendingUp /> Trendings</h2>
+                    <HashtagTrendings />
                 </div>
             </div>
         </div>
diff --git a/packages/app/src/pages/home/index.less b/packages/app/src/pages/home/index.less
index 08a2733b..fbee10c4 100644
--- a/packages/app/src/pages/home/index.less
+++ b/packages/app/src/pages/home/index.less
@@ -8,6 +8,11 @@
     width: 100%;
 
     .panel {
+        position: sticky;
+        top: 0;
+
+        height: fit-content;
+
         display: flex;
         flex-direction: column;