From 43c1197ffd20f76de6eced5aabe706406403b2bd Mon Sep 17 00:00:00 2001
From: Caleb Jacob <caleb@near.org>
Date: Tue, 16 Jan 2024 11:28:22 -0700
Subject: [PATCH] Fixed profile page wrapping layout (#614)

---
 src/ProfileEditor.jsx |  2 +-
 src/ProfilePage.jsx   | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/ProfileEditor.jsx b/src/ProfileEditor.jsx
index 249f59e2..9c9fcacd 100644
--- a/src/ProfileEditor.jsx
+++ b/src/ProfileEditor.jsx
@@ -84,7 +84,7 @@ return (
       </div>
       <div className="col-lg-6">
         <div>
-          <Widget src="${REPL_ACCOUNT}/widget/ProfilePage" props={{ accountId, profile: state.profile }} />
+          <Widget src="${REPL_ACCOUNT}/widget/ProfilePage" props={{ accountId, profile: state.profile, stack: true }} />
         </div>
       </div>
     </div>
diff --git a/src/ProfilePage.jsx b/src/ProfilePage.jsx
index 7fd611f8..f0075874 100644
--- a/src/ProfilePage.jsx
+++ b/src/ProfilePage.jsx
@@ -39,9 +39,13 @@ const Wrapper = styled.div`
 `;
 
 const Main = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: ${props.stack ? "minmax(0, 1fr)" : "min-content minmax(0, 1fr)"};
   gap: 40px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
 `;
 
 const BackgroundImage = styled.div`
@@ -79,9 +83,6 @@ const SidebarWrapper = styled.div`
 `;
 
 const Content = styled.div`
-  min-width: fit-content;
-  flex-grow: 1;
-
   .post {
     padding-left: 0;
     padding-right: 0;