Reimplement hot markets with flex box, since I can't figure out how to make the css grid version not flash bad layout.

web/components/contract-card.tsx

@@ -17,15 +17,16 @@ import { TrendingUpIcon } from '@heroicons/react/solid'
 export function ContractCard(props: {
   contract: Contract
   showHotVolume?: boolean
+  className?: string
 }) {
-  const { contract, showHotVolume } = props
+  const { contract, showHotVolume, className } = props
   const { question, resolution } = contract
   const { probPercent } = contractMetrics(contract)
 
   return (
     <Link href={contractPath(contract)}>
-      <a className="col-span-1">
-        <li className="bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200">
+      <a className={clsx('col-span-1', className)}>
+        <li className="bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200 list-none">
           <div className="card">
             <div className="card-body p-6">
               <Row className="justify-between gap-4 mb-2">

web/pages/index.tsx

@@ -5,12 +5,13 @@ import {
   getHotContracts,
   listAllContracts,
 } from '../lib/firebase/contracts'
-import { ContractsGrid } from '../components/contracts-list'
 import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
 import { Title } from '../components/title'
 import { ActivityFeed } from './activity'
 import { getRecentComments, Comment } from '../lib/firebase/comments'
+import { Col } from '../components/layout/col'
+import { ContractCard } from '../components/contract-card'
 
 export async function getStaticProps() {
   const [contracts, hotContracts, recentComments] = await Promise.all([
@@ -39,16 +40,32 @@ const Home = (props: {
 
   return (
     <Page>
-      <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
-        <Title className="mt-0" text="🔥 Markets" />
-        <ContractsGrid contracts={hotContracts} showHotVolume />
-      </div>
-
+      <HotMarkets hotContracts={hotContracts} />
       <Spacer h={10} />
-
       <ActivityFeed contracts={contracts} recentComments={recentComments} />
     </Page>
   )
 }
 
+const HotMarkets = (props: { hotContracts: Contract[] }) => {
+  const { hotContracts } = props
+  const [c1, c2, c3, c4] = hotContracts
+
+  return (
+    <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
+      <Title className="mt-0" text="🔥 Markets" />
+      <Col className="gap-6">
+        <Col className="md:flex-row gap-6">
+          <ContractCard className="flex-1" contract={c1} showHotVolume />
+          <ContractCard className="flex-1" contract={c2} showHotVolume />
+        </Col>
+        <Col className="md:flex-row gap-6">
+          <ContractCard className="flex-1" contract={c3} showHotVolume />
+          <ContractCard className="flex-1" contract={c4} showHotVolume />
+        </Col>
+      </Col>
+    </div>
+  )
+}
+
 export default Home