From 6ce53a4418643d46e9b142142a6278369a7cd6e6 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 3 Apr 2022 18:43:30 -0500
Subject: [PATCH] Only show one of bet panel or bet row. Bring back sticky bet
 panel & sidebar

---
 web/components/contract-overview.tsx    | 6 +++---
 web/components/nav/sidebar.tsx          | 4 ++--
 web/components/page.tsx                 | 2 +-
 web/pages/[username]/[contractSlug].tsx | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 5409a81e..c94dbaf5 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -42,14 +42,14 @@ export const ContractOverview = (props: {
 
           {(isBinary || resolution) && (
             <ResolutionOrChance
-              className="hidden md:flex items-end"
+              className="hidden items-end xl:flex"
               contract={contract}
               large
             />
           )}
         </Row>
 
-        <Row className="md:hidden items-center justify-between gap-4">
+        <Row className="items-center justify-between gap-4 xl:hidden">
           {(isBinary || resolution) && (
             <ResolutionOrChance contract={contract} />
           )}
@@ -103,7 +103,7 @@ export const ContractOverview = (props: {
         comments={comments}
         user={user}
         mode="all"
-        betRowClassName="!mt-0"
+        betRowClassName="!mt-0 xl:hidden"
       />
     </Col>
   )
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 642090ba..358d2982 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -86,8 +86,8 @@ export default function Sidebar() {
   const navigationOptions = user === null ? signedOutNavigation : navigation
 
   return (
-    <nav aria-label="Sidebar" className="sticky divide-y divide-gray-300">
-      <div className="mt-2 space-y-1 pb-6">
+    <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
+      <div className="space-y-1 pb-6">
         <ManifoldLogo hideText />
       </div>
 
diff --git a/web/components/page.tsx b/web/components/page.tsx
index 588d90ae..76cf7bdd 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -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 space-y-4">{rightSidebar}</div>
+          <div className="sticky top-4 space-y-4">{rightSidebar}</div>
         </aside>
       </div>
 
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 3a36f01a..9fc67ac9 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -124,7 +124,7 @@ export default function ContractPage(props: {
   const rightSidebar = hasSidePanel ? (
     <Col className="gap-4">
       {allowTrade && (
-        <BetPanel className="hidden lg:flex" contract={contract} />
+        <BetPanel className="hidden xl:flex" contract={contract} />
       )}
       {allowResolve && <ResolutionPanel creator={user} contract={contract} />}
     </Col>