Fix hiding bet row on market page

web/components/bet-row.tsx

@@ -1,4 +1,4 @@
-/* This example requires Tailwind CSS v2.0+ */
+import clsx from 'clsx'
 import { Fragment, useState } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { Contract } from '../lib/firebase/contracts'
@@ -10,7 +10,9 @@ import { YesNoSelector } from './yes-no-selector'
 export default function BetRow(props: {
   contract: Contract
   className?: string
+  labelClassName?: string
 }) {
+  const { className, labelClassName } = props
   const [open, setOpen] = useState(false)
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
     undefined
@@ -18,23 +20,27 @@ export default function BetRow(props: {
 
   return (
     <>
-      <Row className="items-center gap-2 justify-end">
+      <div className={className}>
-        <div className=" text-gray-400 mr-2">Place a trade</div>
+        <Row className="items-center gap-2 justify-end">
-        <YesNoSelector
+          <div className={clsx('text-gray-400 mr-2', labelClassName)}>
-          btnClassName="btn-sm w-20"
+            Place a trade
-          onSelect={(choice) => {
+          </div>
-            setOpen(true)
+          <YesNoSelector
-            setBetChoice(choice)
+            btnClassName="btn-sm w-20"
-          }}
+            onSelect={(choice) => {
-        />
+              setOpen(true)
-      </Row>
+              setBetChoice(choice)
-      <Modal open={open} setOpen={setOpen}>
+            }}
-        <BetPanel
+          />
-          contract={props.contract}
+        </Row>
-          title={props.contract.question}
+        <Modal open={open} setOpen={setOpen}>
-          selected={betChoice}
+          <BetPanel
-        />
+            contract={props.contract}
-      </Modal>
+            title={props.contract.question}
+            selected={betChoice}
+          />
+        </Modal>
+      </div>
     </>
   )
 }

web/components/contract-feed.tsx

@@ -626,8 +626,9 @@ export function ContractFeed(props: {
   comments: Comment[]
   // Feed types: 'activity' = Activity feed, 'market' = Comments feed on a market
   feedType: 'activity' | 'market'
+  betRowClassName?: string
 }) {
-  const { contract, feedType } = props
+  const { contract, feedType, betRowClassName } = props
   const { id } = contract
   const [expanded, setExpanded] = useState(false)
   const user = useUser()
@@ -702,7 +703,10 @@ export function ContractFeed(props: {
         ))}
       </ul>
       {tradingAllowed(contract) && (
-        <BetRow contract={contract} className="-mt-4" />
+        <BetRow
+          contract={contract}
+          className={clsx('-mt-4', betRowClassName)}
+        />
       )}
     </div>
   )

web/components/contract-overview.tsx

@@ -52,7 +52,7 @@ export const ContractOverview = (props: {
             <Linkify text={contract.question} />
           </div>
 
-          <Row className="justify-between gap-4">
+          <Row className="justify-between items-center gap-4">
             <ResolutionOrChance
               className="md:hidden"
               resolution={resolution}
@@ -60,7 +60,11 @@ export const ContractOverview = (props: {
               large
             />
 
-            <BetRow contract={contract} className="md:hidden" />
+            <BetRow
+              contract={contract}
+              className="md:hidden"
+              labelClassName="hidden"
+            />
           </Row>
 
           <ContractDetails contract={contract} />
@@ -109,6 +113,7 @@ export const ContractOverview = (props: {
         bets={bets}
         comments={comments}
         feedType="market"
+        betRowClassName="md:hidden !mt-0"
       />
     </Col>
   )