improve account layout with queries

packages/app/src/components/PostsList/index.less

@@ -56,8 +56,8 @@
     overflow: hidden;
     overflow-y: overlay;
 
+    width: 100%;
     height: 100%;
-    width: 35vw;
 
     display: flex;
     flex-direction: column;

packages/app/src/components/UserCard/index.less

@@ -116,8 +116,11 @@
             align-items: center;
             justify-content: center;
 
-            width: 25vw;
+            width: 120px;
-            height: 25vw;
+            height: 120px;
+
+            max-height: 120px;
+            max-width: 120px;
 
             border-radius: 12px;
 
@@ -140,7 +143,8 @@
             flex-direction: column;
             justify-content: center;
 
-            margin-left: 30%;
+            margin-left: calc(120px + 10px);
+
             padding: 10px;
             padding-left: 15px;
 

packages/app/src/pages/account/index.less

@@ -71,10 +71,7 @@
 		position: relative;
 
 		display: flex;
-		// grid-template-columns: repeat(3, 1fr);
+		flex-direction: row;
-		// grid-template-rows: 1fr;
-		// grid-column-gap: 20px;
-		// grid-row-gap: 0px;
 
 		gap: 20px;
 
@@ -128,7 +125,7 @@
 
 		.content {
 			height: 100%;
-			width: 90%;
+			width: 50%;
 
 			.fade-opacity-active {
 				height: 100%;
@@ -148,8 +145,6 @@
 
 			height: fit-content;
 			width: fit-content;
-			//width: 20vw;
-			//	min-width: 400px;
 
 			justify-self: center;
 		}
@@ -160,4 +155,53 @@
 		padding: 20px;
 		border-radius: @borderRadius;
 	}
+
+	@media (max-width: 1720px) {
+		.panels {
+			.content {
+				width: 53%;
+			}
+
+			.leftPanel {
+				.userCard {
+					width: 300px;
+					min-width: 300px;
+				}
+
+				.actions {
+					width: 300px;
+					min-width: 300px;
+				}
+			}
+
+			.tabMenuWrapper {
+				width: fit-content;
+
+				top: 0;
+				right: 0;
+
+				padding: 10px !important;
+
+				.ant-menu {
+					display: flex;
+					flex-direction: column;
+
+					margin: 0;
+					padding: 0;
+					width: fit-content;
+
+					.ant-menu-item {
+
+						width: fit-content;
+
+						.ant-menu-title-content {
+							width: 0;
+							opacity: 0;
+							margin: 0;
+						}
+					}
+				}
+			}
+		}
+	}
 }