Fix overlapping bet panel

web/components/nav/sidebar.tsx

@@ -86,11 +86,8 @@ export default function Sidebar() {
   const navigationOptions = user === null ? signedOutNavigation : navigation
 
   return (
-    <nav
-      aria-label="Sidebar"
-      className="sticky top-4 mt-4 divide-y divide-gray-300"
-    >
-      <div className="space-y-1 pb-6">
+    <nav aria-label="Sidebar" className="sticky divide-y divide-gray-300">
+      <div className="mt-2 space-y-1 pb-6">
         <ManifoldLogo hideText />
       </div>
 

web/components/page.tsx

@@ -14,16 +14,16 @@ export function Page(props: {
     <div>
       <div
         className={clsx(
-          'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
+          'mx-auto w-full pb-16 pt-6 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
           margin && 'px-4'
         )}
       >
-        <div className="hidden lg:col-span-3 lg:block xl:col-span-2">
+        <div className="hidden lg:col-span-2 lg:block">
           {assertUser !== 'signed-out' && <Sidebar />}
         </div>
         <main
           className={clsx(
-            'pt-6 lg:col-span-9',
+            'lg:col-span-8',
             rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
           )}
         >
@@ -33,7 +33,7 @@ export function Page(props: {
           <div className="block xl:hidden">{rightSidebar}</div>
         </main>
         <aside className="hidden xl:col-span-3 xl:block">
-          <div className="sticky top-4 space-y-4">{rightSidebar}</div>
+          <div className="sticky space-y-4">{rightSidebar}</div>
         </aside>
       </div>
 

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

@@ -141,42 +141,40 @@ export default function ContractPage(props: {
         />
       )}
 
-      <Col className="w-full justify-between md:flex-row">
-        <div className="flex-1 rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
-          <ContractOverview
-            contract={contract}
-            bets={bets ?? []}
-            comments={comments ?? []}
-            folds={folds}
-          >
-            {contract.outcomeType === 'FREE_RESPONSE' && (
-              <>
-                <Spacer h={4} />
-                <AnswersPanel
-                  contract={contract as any}
-                  answers={props.answers}
-                />
-                <Spacer h={4} />
-                <div className="divider before:bg-gray-300 after:bg-gray-300" />
-              </>
-            )}
-          </ContractOverview>
-
-          {contract.isResolved && (
+      <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
+        <ContractOverview
+          contract={contract}
+          bets={bets ?? []}
+          comments={comments ?? []}
+          folds={folds}
+        >
+          {contract.outcomeType === 'FREE_RESPONSE' && (
             <>
-              <div className="grid grid-cols-1 sm:grid-cols-2">
-                <ContractLeaderboard contract={contract} bets={bets} />
-                <ContractTopTrades
-                  contract={contract}
-                  bets={bets}
-                  comments={comments}
-                />
-              </div>
-              <Spacer h={12} />
+              <Spacer h={4} />
+              <AnswersPanel
+                contract={contract as any}
+                answers={props.answers}
+              />
+              <Spacer h={4} />
+              <div className="divider before:bg-gray-300 after:bg-gray-300" />
             </>
           )}
-          <BetsSection contract={contract} user={user ?? null} bets={bets} />
-        </div>
+        </ContractOverview>
+
+        {contract.isResolved && (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2">
+              <ContractLeaderboard contract={contract} bets={bets} />
+              <ContractTopTrades
+                contract={contract}
+                bets={bets}
+                comments={comments}
+              />
+            </div>
+            <Spacer h={12} />
+          </>
+        )}
+        <BetsSection contract={contract} user={user ?? null} bets={bets} />
       </Col>
     </Page>
   )