Use masonry on contract cards, sorted correctly (#773)

* Revert "Revert "Tile contract cards in masonry layout (#761)""

This reverts commit 62728e52b7.

* Sort the contracts in the correct masonry order

* Fix ordering on single columns

* Use react-masonry-css to accomplish masonry view

* Improve comment

* Remove gridClassName

Everything is spaced with m-4, too bad

functions/package.json

@@ -39,6 +39,7 @@
     "lodash": "4.17.21",
     "mailgun-js": "0.22.0",
     "module-alias": "2.2.2",
+    "react-masonry-css": "1.0.16",
     "stripe": "8.194.0",
     "zod": "3.17.2"
   },

web/components/contract-search.tsx

@@ -83,7 +83,6 @@ export function ContractSearch(props: {
   highlightOptions?: ContractHighlightOptions
   onContractClick?: (contract: Contract) => void
   hideOrderSelector?: boolean
-  overrideGridClassName?: string
   cardHideOptions?: {
     hideGroupLink?: boolean
     hideQuickBet?: boolean
@@ -99,7 +98,6 @@ export function ContractSearch(props: {
     defaultFilter,
     additionalFilter,
     onContractClick,
-    overrideGridClassName,
     hideOrderSelector,
     cardHideOptions,
     highlightOptions,
@@ -183,7 +181,6 @@ export function ContractSearch(props: {
         loadMore={performQuery}
         showTime={showTime}
         onContractClick={onContractClick}
-        overrideGridClassName={overrideGridClassName}
         highlightOptions={highlightOptions}
         cardHideOptions={cardHideOptions}
       />

web/components/contract/contracts-grid.tsx

@@ -9,6 +9,7 @@ import { useCallback } from 'react'
 import clsx from 'clsx'
 import { LoadingIndicator } from '../loading-indicator'
 import { VisibilityObserver } from '../visibility-observer'
+import Masonry from 'react-masonry-css'
 
 export type ContractHighlightOptions = {
   contractIds?: string[]
@@ -20,7 +21,6 @@ export function ContractsGrid(props: {
   loadMore?: () => void
   showTime?: ShowTime
   onContractClick?: (contract: Contract) => void
-  overrideGridClassName?: string
   cardHideOptions?: {
     hideQuickBet?: boolean
     hideGroupLink?: boolean
@@ -32,7 +32,6 @@ export function ContractsGrid(props: {
     showTime,
     loadMore,
     onContractClick,
-    overrideGridClassName,
     cardHideOptions,
     highlightOptions,
   } = props
@@ -64,12 +63,11 @@ export function ContractsGrid(props: {
 
   return (
     <Col className="gap-8">
-      <ul
+      <Masonry
-        className={clsx(
+        // Show only 1 column on tailwind's md breakpoint (768px)
-          overrideGridClassName
+        breakpointCols={{ default: 2, 768: 1 }}
-            ? overrideGridClassName
+        className="-ml-4 flex w-auto"
-            : 'grid w-full grid-cols-1 gap-4 md:grid-cols-2'
+        columnClassName="pl-4 bg-clip-padding"
-        )}
       >
         {contracts.map((contract) => (
           <ContractCard
@@ -81,14 +79,13 @@ export function ContractsGrid(props: {
             }
             hideQuickBet={hideQuickBet}
             hideGroupLink={hideGroupLink}
-            className={
+            className={clsx(
-              contractIds?.includes(contract.id)
+              'mb-4 break-inside-avoid-column',
-                ? highlightClassName
+              contractIds?.includes(contract.id) && highlightClassName
-                : undefined
+            )}
-            }
           />
         ))}
-      </ul>
+      </Masonry>
       <VisibilityObserver
         onVisibilityUpdated={onVisibilityUpdated}
         className="relative -top-96 h-1"

web/components/editor/market-modal.tsx

@@ -65,9 +65,6 @@ export function MarketModal(props: {
           <ContractSearch
             hideOrderSelector
             onContractClick={addContract}
-            overrideGridClassName={
-              'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
-            }
             cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
             highlightOptions={{
               contractIds: contracts.map((c) => c.id),

web/pages/group/[...slugs]/index.tsx

@@ -607,9 +607,6 @@ 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'
-              }
               cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
               additionalFilter={{ excludeContractIds: group.contractIds }}
               highlightOptions={{

yarn.lock

@@ -9947,6 +9947,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+react-masonry-css@1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"