Tile contract cards in masonry layout (#761)

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}
       />

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>

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),

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={{