Sort the contracts in the correct masonry order

web/components/contract/contracts-grid.tsx

@@ -61,16 +61,30 @@ export function ContractsGrid(props: {
       </p>
     )
   }
+  // Reorganize the contracts so that the masonry layout shows them in the original order
+  // E.g. from [0, 1, 2, 3] => [0, 2, 1, 3]
+  // E.g. from [0, 1, 2, 3, 4, 5, 6] => [0, 2, 4, 1, 3, 5, 6]
+  const halfway = Math.floor(contracts.length / 2)
+  function reorder(i: number) {
+    return i < halfway
+      ? i * 2
+      : Math.min((i - halfway) * 2 + 1, (contracts?.length ?? 1) - 1)
+  }
+  const twoColContracts = Array.from(
+    { length: contracts.length },
+    (_, i) => contracts[reorder(i)]
+  )
 
   return (
     <Col className="gap-8">
-      <ul
+      <div
         className={clsx(
           'w-full columns-1 gap-4 space-y-4 md:columns-2',
           gridClassName
         )}
       >
-        {contracts.map((contract) => (
+        {/* TODO: When columns-1, don't reorder the contracts */}
+        {twoColContracts.map((contract) => (
           <ContractCard
             contract={contract}
             key={contract.id}
@@ -86,7 +100,7 @@ export function ContractsGrid(props: {
             )}
           />
         ))}
-      </ul>
+      </div>
       <VisibilityObserver
         onVisibilityUpdated={onVisibilityUpdated}
         className="relative -top-96 h-1"