Fixed profile page wrapping layout (#614)

near · Jan 16, 2024 · 43c1197 · 43c1197
1 parent a384704
commit 43c1197
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@