From 4002c23beea064f58cbedca007e11a581625e37d Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Mon, 15 Aug 2022 17:41:53 -0700
Subject: [PATCH] Tile contract cards in masonry layout (#761)

---
 web/components/contract-search.tsx         |  6 +++---
 web/components/contract/contracts-grid.tsx | 18 ++++++++----------
 web/components/editor/market-modal.tsx     |  4 +---
 web/pages/group/[...slugs]/index.tsx       |  4 +---
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index 11d65a13..41360eb7 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -83,7 +83,7 @@ export function ContractSearch(props: {
   highlightOptions?: ContractHighlightOptions
   onContractClick?: (contract: Contract) => void
   hideOrderSelector?: boolean
-  overrideGridClassName?: string
+  gridClassName?: string
   cardHideOptions?: {
     hideGroupLink?: boolean
     hideQuickBet?: boolean
@@ -98,7 +98,7 @@ export function ContractSearch(props: {
     defaultFilter,
     additionalFilter,
     onContractClick,
-    overrideGridClassName,
+    gridClassName,
     hideOrderSelector,
     cardHideOptions,
     highlightOptions,
@@ -181,7 +181,7 @@ export function ContractSearch(props: {
         loadMore={performQuery}
         showTime={showTime}
         onContractClick={onContractClick}
-        overrideGridClassName={overrideGridClassName}
+        gridClassName={gridClassName}
         highlightOptions={highlightOptions}
         cardHideOptions={cardHideOptions}
       />
diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index 05c66d56..915facd9 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@@ -20,7 +20,7 @@ export function ContractsGrid(props: {
   loadMore?: () => void
   showTime?: ShowTime
   onContractClick?: (contract: Contract) => void
-  overrideGridClassName?: string
+  gridClassName?: string
   cardHideOptions?: {
     hideQuickBet?: boolean
     hideGroupLink?: boolean
@@ -32,7 +32,7 @@ export function ContractsGrid(props: {
     showTime,
     loadMore,
     onContractClick,
-    overrideGridClassName,
+    gridClassName,
     cardHideOptions,
     highlightOptions,
   } = props
@@ -66,9 +66,8 @@ export function ContractsGrid(props: {
     <Col className="gap-8">
       <ul
         className={clsx(
-          overrideGridClassName
-            ? overrideGridClassName
-            : 'grid w-full grid-cols-1 gap-4 md:grid-cols-2'
+          'w-full columns-1 gap-4 space-y-4 md:columns-2',
+          gridClassName
         )}
       >
         {contracts.map((contract) => (
@@ -81,11 +80,10 @@ export function ContractsGrid(props: {
             }
             hideQuickBet={hideQuickBet}
             hideGroupLink={hideGroupLink}
-            className={
-              contractIds?.includes(contract.id)
-                ? highlightClassName
-                : undefined
-            }
+            className={clsx(
+              'break-inside-avoid-column',
+              contractIds?.includes(contract.id) && highlightClassName
+            )}
           />
         ))}
       </ul>
diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx
index 85b7a978..02925ff3 100644
--- a/web/components/editor/market-modal.tsx
+++ b/web/components/editor/market-modal.tsx
@@ -65,9 +65,7 @@ export function MarketModal(props: {
           <ContractSearch
             hideOrderSelector
             onContractClick={addContract}
-            overrideGridClassName={
-              'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
-            }
+            gridClassName="gap-3 space-y-3"
             cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
             highlightOptions={{
               contractIds: contracts.map((c) => c.id),
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index c5255974..c66d5aa5 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -607,9 +607,7 @@ function AddContractButton(props: { group: Group; user: User }) {
               user={user}
               hideOrderSelector={true}
               onContractClick={addContractToCurrentGroup}
-              overrideGridClassName={
-                'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
-              }
+              gridClassName="gap-3 space-y-3"
               cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
               additionalFilter={{ excludeContractIds: group.contractIds }}
               highlightOptions={{