From e18e7548d5c65493ec3a4c2e1ab4658e8a096740 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Fri, 10 Dec 2021 12:52:11 -0600
Subject: [PATCH] Better layout on mobile for contract page

---
 web/components/bet-panel.tsx         | 2 +-
 web/components/contract-overview.tsx | 8 ++++----
 web/pages/contract/[contractId].tsx  | 8 +++++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 8a403077..be9dcdca 100644
--- a/web/components/bet-panel.tsx
+++ b/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"
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index 543aa98a..c76d5b8c 100644
--- a/web/components/contract-overview.tsx
+++ b/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} />
diff --git a/web/pages/contract/[contractId].tsx b/web/pages/contract/[contractId].tsx
index 610b9959..bcde85fa 100644
--- a/web/pages/contract/[contractId].tsx
+++ b/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>
   )