From 7cf9e9267867d4e9d2c73198a823e31a2747c64e Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 24 Nov 2022 12:02:16 +0000
Subject: [PATCH] improve account page for mobile

---
 packages/app/src/pages/account/index.jsx | 14 +++++++++++++-
 packages/app/src/theme/index.less        |  9 +++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/pages/account/index.jsx b/packages/app/src/pages/account/index.jsx
index 5ed4daea..d2b863f2 100755
--- a/packages/app/src/pages/account/index.jsx
+++ b/packages/app/src/pages/account/index.jsx
@@ -99,6 +99,8 @@ export default class Account extends React.Component {
 
 	coverComponent = React.createRef()
 
+	tabNavigatorRef = React.createRef()
+
 	api = window.app.api.withEndpoints("main")
 
 	componentDidMount = async () => {
@@ -215,8 +217,18 @@ 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"
+
+			if (window.isMobile) {
+				this.tabNavigatorRef.current.style.overflow = "hidden"
+				this.tabNavigatorRef.current.style.height = "0px"
+			}
 		} else {
 			this.coverComponent.current.style.height = ""
+
+			if (window.isMobile) {
+				this.tabNavigatorRef.current.style.overflow = ""
+				this.tabNavigatorRef.current.style.height = ""
+			}
 		}
 	}
 
@@ -293,7 +305,7 @@ export default class Account extends React.Component {
 			</div>
 
 			<div className="contents">
-				<div className="tabMenuWrapper">
+				<div className="tabMenuWrapper" ref={this.tabNavigatorRef}>
 					<antd.Menu
 						className="tabMenu"
 						mode={window.isMobile ? "horizontal" : "vertical"}
diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less
index f95d3b60..b77f8e95 100755
--- a/packages/app/src/theme/index.less
+++ b/packages/app/src/theme/index.less
@@ -330,6 +330,15 @@ html {
 
 				padding: 0;
 
+				margin-top: -4.5vh;
+
+				padding: 0;
+
+				.tabContent {
+					padding: 0;
+					padding-top: 20px;
+				}
+
 				.tabMenuWrapper{
 					display: flex;
 					flex-direction: column;