Improve positioning of x% chance on mobile, break words in description.

web/components/contract-card.tsx

@@ -0,0 +1,74 @@
+import clsx from 'clsx'
+import Link from 'next/link'
+import { Row } from '../components/layout/row'
+import { formatMoney } from '../lib/util/format'
+import { UserLink } from './user-page'
+import { Linkify } from './linkify'
+import { Contract, compute, path } from '../lib/firebase/contracts'
+
+export function ContractCard(props: { contract: Contract }) {
+  const { contract } = props
+  const { probPercent } = compute(contract)
+
+  const resolutionColor = {
+    YES: 'text-primary',
+    NO: 'text-red-400',
+    MKT: 'text-blue-400',
+    CANCEL: 'text-yellow-400',
+    '': '', // Empty if unresolved
+  }[contract.resolution || '']
+
+  const resolutionText = {
+    YES: 'YES',
+    NO: 'NO',
+    MKT: 'MKT',
+    CANCEL: 'N/A',
+    '': '',
+  }[contract.resolution || '']
+
+  return (
+    <Link href={path(contract)}>
+      <a>
+        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200">
+          <div className="card">
+            <div className="card-body p-6">
+              <Row className="justify-between gap-4 mb-2">
+                <p className="font-medium text-indigo-700">
+                  <Linkify text={contract.question} />
+                </p>
+                <div className={clsx('text-4xl', resolutionColor)}>
+                  {resolutionText || (
+                    <div className="text-primary">
+                      {probPercent}
+                      <div className="text-lg">chance</div>
+                    </div>
+                  )}
+                </div>
+              </Row>
+              <ContractDetails contract={contract} />
+            </div>
+          </div>
+        </li>
+      </a>
+    </Link>
+  )
+}
+
+export function ContractDetails(props: { contract: Contract }) {
+  const { contract } = props
+  const { truePool, createdDate, resolvedDate } = compute(contract)
+
+  return (
+    <Row className="flex-wrap text-sm text-gray-500">
+      <div className="whitespace-nowrap">
+        <UserLink username={contract.creatorUsername} />
+      </div>
+      <div className="mx-2">•</div>
+      <div className="whitespace-nowrap">
+        {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
+      </div>
+      <div className="mx-2">•</div>
+      <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+    </Row>
+  )
+}

web/components/contract-overview.tsx

@@ -8,13 +8,13 @@ import {
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
 import { ContractProbGraph } from './contract-prob-graph'
-import { ContractDetails } from './contracts-list'
 import router from 'next/router'
 import { useUser } from '../hooks/use-user'
 import { Row } from './layout/row'
 import dayjs from 'dayjs'
 import { Linkify } from './linkify'
 import clsx from 'clsx'
+import { ContractDetails } from './contract-card'
 
 function ContractDescription(props: {
   contract: Contract
@@ -35,7 +35,7 @@ function ContractDescription(props: {
   }
 
   return (
-    <div className="whitespace-pre-line">
+    <div className="whitespace-pre-line break-words">
       <Linkify text={contract.description} />
       <br />
       {isCreator &&
@@ -84,6 +84,40 @@ function ContractDescription(props: {
   )
 }
 
+function ResolutionOrChance(props: {
+  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
+  probPercent: string
+  className?: string
+}) {
+  const { resolution, probPercent, className } = props
+
+  const resolutionColor = {
+    YES: 'text-primary',
+    NO: 'text-red-400',
+    MKT: 'text-blue-400',
+    CANCEL: 'text-yellow-400',
+    '': '', // Empty if unresolved
+  }[resolution || '']
+
+  return (
+    <Col className={clsx('text-3xl md:text-4xl', className)}>
+      {resolution ? (
+        <>
+          <div className="text-lg md:text-xl text-gray-500">Resolved</div>
+          <div className={resolutionColor}>
+            {resolution === 'CANCEL' ? 'N/A' : resolution}
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="text-primary">{probPercent}</div>
+          <div className="text-lg md:text-xl text-primary">chance</div>
+        </>
+      )}
+    </Col>
+  )
+}
+
 export const ContractOverview = (props: {
   contract: Contract
   className?: string
@@ -95,39 +129,29 @@ export const ContractOverview = (props: {
   const user = useUser()
   const isCreator = user?.id === creatorId
 
-  const resolutionColor = {
-    YES: 'text-primary',
-    NO: 'text-red-400',
-    MKT: 'text-blue-400',
-    CANCEL: 'text-yellow-400',
-    '': '', // Empty if unresolved
-  }[contract.resolution || '']
-
   return (
     <Col className={clsx('mb-6', className)}>
-      <Col className="justify-between md:flex-row">
+      <Row className="justify-between gap-4">
-        <Col>
+        <Col className="gap-4">
-          <div className="text-3xl text-indigo-700 mb-4">
+          <div className="text-2xl md:text-3xl text-indigo-700">
             <Linkify text={contract.question} />
           </div>
 
+          <ResolutionOrChance
+            className="md:hidden"
+            resolution={resolution}
+            probPercent={probPercent}
+          />
+
           <ContractDetails contract={contract} />
         </Col>
 
-        {resolution ? (
+        <ResolutionOrChance
-          <Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 items-end self-center md:self-start">
+          className="hidden md:flex md:items-end"
-            <div className="text-xl text-gray-500">Resolved</div>
+          resolution={resolution}
-            <div className={resolutionColor}>
+          probPercent={probPercent}
-              {resolution === 'CANCEL' ? 'N/A' : resolution}
+        />
-            </div>
+      </Row>
-          </Col>
-        ) : (
-          <Col className="text-4xl mt-8 md:mt-0 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
-            {probPercent}
-            <div className="text-xl">chance</div>
-          </Col>
-        )}
-      </Col>
 
       <Spacer h={4} />
 

web/components/contracts-list.tsx

@@ -3,87 +3,17 @@ import Link from 'next/link'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 
-import { Row } from '../components/layout/row'
 import {
   compute,
   Contract,
   listContracts,
   path,
 } from '../lib/firebase/contracts'
-import { formatMoney } from '../lib/util/format'
 import { User } from '../lib/firebase/users'
-import { UserLink } from './user-page'
-import { Linkify } from './linkify'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { parseTags } from '../lib/util/parse'
-
+import { ContractCard } from './contract-card'
-export function ContractDetails(props: { contract: Contract }) {
-  const { contract } = props
-  const { truePool, createdDate, resolvedDate } = compute(contract)
-
-  return (
-    <Row className="flex-wrap text-sm text-gray-500">
-      <div className="whitespace-nowrap">
-        <UserLink username={contract.creatorUsername} />
-      </div>
-      <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">
-        {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
-      </div>
-      <div className="mx-2">•</div>
-      <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
-    </Row>
-  )
-}
-
-function ContractCard(props: { contract: Contract }) {
-  const { contract } = props
-  const { probPercent } = compute(contract)
-
-  const resolutionColor = {
-    YES: 'text-primary',
-    NO: 'text-red-400',
-    MKT: 'text-blue-400',
-    CANCEL: 'text-yellow-400',
-    '': '', // Empty if unresolved
-  }[contract.resolution || '']
-
-  const resolutionText = {
-    YES: 'YES',
-    NO: 'NO',
-    MKT: 'MKT',
-    CANCEL: 'N/A',
-    '': '',
-  }[contract.resolution || '']
-
-  return (
-    <Link href={path(contract)}>
-      <a>
-        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200">
-          <div className="card">
-            <div className="card-body p-6">
-              <Row className="justify-between gap-4 mb-2">
-                <p className="font-medium text-indigo-700">
-                  <Linkify text={contract.question} />
-                </p>
-                <div className={clsx('text-4xl', resolutionColor)}>
-                  {resolutionText || (
-                    <div className="text-primary">
-                      {probPercent}
-                      <div className="text-lg">chance</div>
-                    </div>
-                  )}
-                </div>
-              </Row>
-              <ContractDetails contract={contract} />
-            </div>
-          </div>
-        </li>
-      </a>
-    </Link>
-  )
-}
 
 function ContractsGrid(props: { contracts: Contract[] }) {
   const [resolvedContracts, activeContracts] = _.partition(
@@ -117,7 +47,7 @@ function ContractsGrid(props: { contracts: Contract[] }) {
 
 const MAX_GROUPED_CONTRACTS_DISPLAYED = 6
 
-export function CreatorContractsGrid(props: { contracts: Contract[] }) {
+function CreatorContractsGrid(props: { contracts: Contract[] }) {
   const { contracts } = props
 
   const byCreator = _.groupBy(contracts, (contract) => contract.creatorId)
@@ -165,7 +95,7 @@ export function CreatorContractsGrid(props: { contracts: Contract[] }) {
   )
 }
 
-export function TagContractsGrid(props: { contracts: Contract[] }) {
+function TagContractsGrid(props: { contracts: Contract[] }) {
   const { contracts } = props
 
   const contractTags = _.flatMap(contracts, (contract) =>