Fix feed layout on mobile, adjust spacing, max width.

web/components/contract-feed.tsx

@@ -29,8 +29,8 @@ import { createComment } from '../lib/firebase/comments'
 import { useComments } from '../hooks/use-comments'
 import { formatMoney } from '../lib/util/format'
 import { ResolutionOrChance } from './contract-card'
-import Link from 'next/link'
 import { SiteLink } from './site-link'
+import { Col } from './layout/col'
 dayjs.extend(relativeTime)
 
 function FeedComment(props: { activityItem: any }) {
@@ -149,6 +149,8 @@ export function ContractDescription(props: {
     setDescription(editStatement())
   }
 
+  if (!isCreator && !contract.description.trim()) return null
+
   return (
     <div className="whitespace-pre-line break-words mt-2 text-gray-700">
       <Linkify text={contract.description} />
@@ -213,12 +215,15 @@ function FeedQuestion(props: { contract: Contract }) {
         </div>
       </div>
       <div className="min-w-0 flex-1 py-1.5">
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 mb-2">
           <span className="text-gray-900">{contract.creatorName}</span> asked{' '}
           <Timestamp time={contract.createdTime} />
         </div>
-        <Row className="justify-between gap-4 mb-2">
+        <Col className="items-start sm:flex-row justify-between gap-2 sm:gap-4 mb-4 mr-2">
-          <SiteLink href={path(contract)} className="text-xl text-indigo-700">
+          <SiteLink
+            href={path(contract)}
+            className="text-lg sm:text-xl text-indigo-700"
+          >
             {contract.question}
           </SiteLink>
           <ResolutionOrChance
@@ -226,7 +231,7 @@ function FeedQuestion(props: { contract: Contract }) {
             resolution={contract.resolution}
             probPercent={probPercent}
           />
-        </Row>
+        </Col>
         <ContractDescription contract={contract} isCreator={false} />
       </div>
     </>

web/pages/activity.tsx

@@ -1,17 +1,17 @@
 import _ from 'lodash'
 import { ContractFeed } from '../components/contract-feed'
-import { Row } from '../components/layout/row'
 import { Page } from '../components/page'
 import { Title } from '../components/title'
 import { useRecentComments } from '../hooks/use-comments'
 import { useContracts } from '../hooks/use-contracts'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
+import { Col } from '../components/layout/col'
 
 function FeedCard(props: { contract: Contract }) {
   const { contract } = props
   return (
-    <div className="card bg-white shadow-md rounded-lg divide-y divide-gray-200 py-6 px-4 mb-4">
+    <div className="card bg-white shadow-md rounded-lg divide-y divide-gray-200 py-6 px-4 max-w-3xl">
       <ContractFeed contract={contract} feedType="activity" />
     </div>
   )
@@ -74,16 +74,14 @@ export function ActivityFeed() {
   const recentComments = useRecentComments() || []
   // TODO: Handle static props correctly?
   const activeContracts = findActiveContracts(contracts, recentComments)
-  return contracts ? (
+  return contracts.length > 0 ? (
     <>
       <Title text="Recent Activity" />
-      <Row className="gap-4">
+      <Col className="gap-4">
-        <div>
+        {activeContracts.map((contract) => (
-          {activeContracts.map((contract) => (
+          <FeedCard contract={contract} />
-            <FeedCard contract={contract} />
+        ))}
-          ))}
+      </Col>
-        </div>
-      </Row>
     </>
   ) : (
     <></>

web/pages/create.tsx

@@ -4,7 +4,6 @@ import clsx from 'clsx'
 import dayjs from 'dayjs'
 import Textarea from 'react-expanding-textarea'
 
-import { CreatorContractsList } from '../components/contracts-list'
 import { Spacer } from '../components/layout/spacer'
 import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
@@ -84,7 +83,7 @@ export default function NewContract() {
     <Page>
       <Title text="Create a new prediction market" />
 
-      <div className="w-full bg-gray-100 rounded-lg shadow-md px-6 py-4">
+      <div className="w-full max-w-3xl bg-gray-100 rounded-lg shadow-md px-6 py-4">
         {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
         {/* When the form is submitted, create a new contract in the database */}
         <form>