profile refactor

src/pages/profile/ui/ProfilePage.module.css

@@ -1,30 +1,29 @@
 .page {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-deep);
-}
-
-.main {
-  max-width: 1024px;
+  max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   padding: 40px 32px 60px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 25% 1fr;
   gap: 32px;
+  align-items: start;
 }
 
-.sections {
-  flex: 1;
+.menu {
+  min-width: 0;
+}
+
+.content {
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-/* < 1024px: avatar + sections stack into a single column */
+/* < 1024px: menu and content stack into a single column */
 @media (max-width: 1023px) {
-  .main {
-    flex-direction: column;
+  .page {
+    grid-template-columns: 1fr;
     padding: 24px 20px 40px;
     gap: 24px;
   }
@@ -32,7 +31,7 @@
 
 /* < 640px: tighter page padding */
 @media (max-width: 639px) {
-  .main {
+  .page {
     padding: 16px 16px 40px;
   }
 }