Insert a right sidebar on folds & contracts

web/components/page.tsx

@@ -6,9 +6,10 @@ export function Page(props: {
   wide?: boolean
   margin?: boolean
   assertUser?: 'signed-in' | 'signed-out'
+  rightSidebar?: React.ReactNode
   children?: any
 }) {
-  const { wide, margin, assertUser, children } = props
+  const { wide, margin, assertUser, children, rightSidebar } = props
 
   return (
     <div>
@@ -16,7 +17,7 @@ export function Page(props: {
 
       <div
         className={clsx(
-          'mx-auto w-full pb-16 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-8',
+          'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
           wide ? 'max-w-6xl' : 'max-w-4xl',
           margin && 'px-4'
         )}
@@ -24,9 +25,9 @@ export function Page(props: {
         <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
           <Sidebar />
         </div>
-        <main className="lg:col-span-9 xl:col-span-8">{children}</main>
+        <main className="lg:col-span-9 xl:col-span-7">{children}</main>
         <aside className="hidden xl:col-span-3 xl:block">
-          <div className="sticky top-4 space-y-4"></div>
+          <div className="sticky top-4 space-y-4">{rightSidebar}</div>
         </aside>
       </div>
     </div>

web/pages/[username]/[contractSlug].tsx

@@ -121,8 +121,17 @@ export default function ContractPage(props: {
 
   const ogCardProps = getOpenGraphProps(contract)
 
+  const rightSidebar = hasSidePanel ? (
+    <Col>
+      {allowTrade && (
+        <BetPanel className="hidden lg:flex" contract={contract} />
+      )}
+      {allowResolve && <ResolutionPanel creator={user} contract={contract} />}
+    </Col>
+  ) : null
+
   return (
-    <Page wide={hasSidePanel}>
+    <Page wide={hasSidePanel} rightSidebar={rightSidebar}>
       {ogCardProps && (
         <SEO
           title={question}
@@ -168,21 +177,6 @@ export default function ContractPage(props: {
           )}
           <BetsSection contract={contract} user={user ?? null} bets={bets} />
         </div>
-
-        {hasSidePanel && (
-          <>
-            <div className="md:ml-6" />
-
-            <Col className="flex-shrink-0 md:w-[310px]">
-              {allowTrade && (
-                <BetPanel className="hidden lg:flex" contract={contract} />
-              )}
-              {allowResolve && (
-                <ResolutionPanel creator={user} contract={contract} />
-              )}
-            </Col>
-          </>
-        )}
       </Col>
     </Page>
   )

web/pages/fold/[...slugs]/index.tsx

@@ -159,8 +159,28 @@ export default function FoldPage(props: {
     return <Custom404 />
   }
 
+  const rightSidebar = (
+    <Col className="mt-6 gap-12">
+      <Row className="justify-end">
+        {isCurator ? (
+          <EditFoldButton className="ml-1" fold={fold} />
+        ) : (
+          <FollowFoldButton className="ml-1" fold={fold} />
+        )}
+      </Row>
+      <FoldOverview fold={fold} curator={curator} />
+      <FoldLeaderboards
+        traderScores={traderScores}
+        creatorScores={creatorScores}
+        topTraders={topTraders}
+        topCreators={topCreators}
+        user={user}
+      />
+    </Col>
+  )
+
   return (
-    <Page wide>
+    <Page rightSidebar={rightSidebar}>
       <SEO
         title={fold.name}
         description={`Curated by ${curator.name}. ${fold.about}`}
@@ -170,11 +190,6 @@ export default function FoldPage(props: {
       <div className="px-3 lg:px-1">
         <Row className="mb-6 justify-between">
           <Title className="!m-0" text={fold.name} />
-          {isCurator ? (
-            <EditFoldButton className="ml-1" fold={fold} />
-          ) : (
-            <FollowFoldButton className="ml-1" fold={fold} />
-          )}
         </Row>
 
         <Col className="mb-6 gap-2 text-gray-500 md:hidden">
@@ -259,16 +274,6 @@ export default function FoldPage(props: {
               <SearchableGrid contracts={contracts} />
             )}
           </Col>
-          <Col className="hidden w-full max-w-xs gap-12 md:flex">
-            <FoldOverview fold={fold} curator={curator} />
-            <FoldLeaderboards
-              traderScores={traderScores}
-              creatorScores={creatorScores}
-              topTraders={topTraders}
-              topCreators={topCreators}
-              user={user}
-            />
-          </Col>
         </Row>
       )}