From 619d4b9e84567c0c1bff0f72ee02ef01f463352a Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Sat, 24 Jun 2023 12:58:53 +0000
Subject: [PATCH] improve layout for mobile

---
 packages/app/src/theme/mobile.less | 37 +++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/theme/mobile.less b/packages/app/src/theme/mobile.less
index 0b80aa19..2b4e2e8d 100755
--- a/packages/app/src/theme/mobile.less
+++ b/packages/app/src/theme/mobile.less
@@ -1,15 +1,26 @@
 @import "theme/vars.less";
 
+@top_bar_height: 52px;
+
+// #root,body,html {
+// 	height: 100%!important;
+// 	max-height: 100%!important;
+// }
+
 .app_layout {
 	&.mobile {
 		display: flex;
 		flex-direction: column;
 
+		height: 100% !important;
+		max-height: 100% !important;
+
 		padding: 0;
 
 		.content_wrapper {
 			height: 100%;
 			width: 100%;
+			max-height: 100%;
 
 			overflow-y: scroll;
 		}
@@ -23,6 +34,9 @@
 			justify-content: center;
 
 			width: 100%;
+			height: 100%;
+			max-height: 100%;
+
 			padding: 7px;
 			padding-bottom: 0px;
 
@@ -41,11 +55,17 @@
 			width: 100%;
 			height: 100%;
 
+			padding: 0;
+
 			.panel {
 				width: 100%;
-				//height: 100%;
 
 				&.left {
+					position: absolute;
+
+					height: @top_bar_height;
+
+					padding: 10px;
 					z-index: 310;
 
 					top: 0;
@@ -58,13 +78,18 @@
 				&.center {
 					z-index: 300;
 
-					overflow: visible;
-					overflow-x: visible;
+					overflow-y: visible;
+					overflow-x: hidden;
 
-					height: calc(100vh - @app_bottomBar_height - @app_topBar_height);
+					margin-top: calc(@top_bar_height + 10px);
+					margin-bottom: 10px;
 
-					-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
-					mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
+					border-radius: 12px;
+
+					height: 100%;
+
+					//-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
+					//mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10px, rgb(0, 0, 0) calc(100% - 10px), rgba(0, 0, 0, 0) 100%);
 				}
 			}