Include "Buy" tag inside buttons

web/components/bet-row.tsx

@@ -5,9 +5,13 @@ import { Contract } from '../lib/firebase/contracts'
 import { BetPanel } from './bet-panel'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
+import clsx from 'clsx'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
-export default function BetRow(props: { contract: Contract }) {
+export default function BetRow(props: {
+  contract: Contract
+  className?: string
+}) {
   const [open, setOpen] = useState(false)
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
     undefined
@@ -15,11 +19,10 @@ export default function BetRow(props: { contract: Contract }) {
 
   return (
     <>
-      <div className="-mt-2 text-xl -mx-4">
+      <div className={clsx(props.className)}>
         <Row className="items-center gap-2 justify-center">
-          Buy
           <YesNoSelector
-            className="w-72"
+            className="w-60"
             onSelect={(choice) => {
               setOpen(true)
               setBetChoice(choice)
@@ -50,7 +53,7 @@ export function Modal(props: {
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
-        className="fixed z-10 inset-0 overflow-y-auto"
+        className="fixed z-40 inset-0 overflow-y-auto"
         onClose={setOpen}
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">

web/components/contract-feed.tsx

@@ -697,7 +697,9 @@ export function ContractFeed(props: {
           </li>
         ))}
       </ul>
-      {tradingAllowed(contract) && <BetRow contract={contract} />}
+      {tradingAllowed(contract) && (
+        <BetRow contract={contract} className="-mt-2 -mx-4" />
+      )}
     </div>
   )
 }

web/components/yes-no-selector.tsx

@@ -22,7 +22,7 @@ export function YesNoSelector(props: {
         )}
         onClick={() => onSelect('YES')}
       >
-        YES
+        Buy YES
       </button>
       <button
         className={clsx(
@@ -33,7 +33,7 @@ export function YesNoSelector(props: {
         )}
         onClick={() => onSelect('NO')}
       >
-        NO
+        Buy NO
       </button>
     </Row>
   )

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

@@ -112,7 +112,9 @@ export default function ContractPage(props: {
             <div className="md:ml-8" />
 
             <Col className="flex-1">
-              {allowTrade && <BetPanel contract={contract} />}
+              {allowTrade && (
+                <BetPanel className="hidden lg:inline" contract={contract} />
+              )}
               {allowResolve && (
                 <ResolutionPanel creator={user} contract={contract} />
               )}