Better layout on mobile for contract page

web/components/bet-panel.tsx

@@ -57,7 +57,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
   const betDisabled = isSubmitting || wasSubmitted
 
   return (
-    <Col className={'bg-gray-600 p-6 rounded ' + className}>
+    <Col className={clsx('bg-gray-600 p-6 rounded w-full md:w-auto', className)}>
       <div className="p-2 font-medium">Pick outcome</div>
       <YesNoSelector
         className="p-2"

web/components/contract-overview.tsx

@@ -44,12 +44,12 @@ export const ContractOverview = (props: { contract: Contract }) => {
     <Col className="max-w-3xl w-full">
       <div className="text-3xl font-medium p-2">{contract.question}</div>
 
-      <Row>
-        <div className="p-2">By {contract.creatorName}</div>
+      <Row className="flex-wrap text-sm">
+        <div className="p-2 whitespace-nowrap">By {contract.creatorName}</div>
         <div className="py-2">•</div>
-        <div className="p-2">Dec 9</div>
+        <div className="p-2 whitespace-nowrap">Dec 9</div>
         <div className="py-2">•</div>
-        <div className="p-2">200,000 volume</div>
+        <div className="p-2 whitespace-nowrap">200,000 volume</div>
       </Row>
 
       <Spacer h={4} />

web/pages/contract/[contractId].tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { useRouter } from 'next/router'
 import { useContract } from '../../hooks/use-contract'
 import { Header } from '../../components/header'
-import { Row } from '../../components/layout/row'
 import { ContractOverview } from '../../components/contract-overview'
 import { BetPanel } from '../../components/bet-panel'
+import { Col } from '../../components/layout/col'
 
 export default function ContractPage() {
   const router = useRouter()
@@ -25,11 +25,13 @@ export default function ContractPage() {
       <Header />
 
       <div className="w-full flex flex-col p-4 mt-4">
-        <Row className="justify-between">
+        <Col className="md:justify-between md:flex-row">
           <ContractOverview contract={contract} />
 
+          <div className="mt-12 md:mt-0" />
+
           <BetPanel className="self-start" contract={contract} />
-        </Row>
+        </Col>
       </div>
     </div>
   )