From dde1ed98dd95215419fbe71fa4ac1e5aa9b5d6be Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 18 Aug 2022 09:37:43 -0700
Subject: [PATCH] Fix ordering on single columns

---
 web/components/contract/contracts-grid.tsx | 26 ++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index cd7746ce..bf0cd9b8 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@@ -79,11 +79,10 @@ export function ContractsGrid(props: {
     <Col className="gap-8">
       <div
         className={clsx(
-          'w-full columns-1 gap-4 space-y-4 md:columns-2',
+          'hidden w-full gap-4 space-y-4 md:block md:columns-2',
           gridClassName
         )}
       >
-        {/* TODO: When columns-1, don't reorder the contracts */}
         {twoColContracts.map((contract) => (
           <ContractCard
             contract={contract}
@@ -101,6 +100,29 @@ export function ContractsGrid(props: {
           />
         ))}
       </div>
+      <div
+        className={clsx(
+          'w-full columns-1 gap-4 space-y-4 md:hidden',
+          gridClassName
+        )}
+      >
+        {contracts.map((contract) => (
+          <ContractCard
+            contract={contract}
+            key={contract.id}
+            showTime={showTime}
+            onClick={
+              onContractClick ? () => onContractClick(contract) : undefined
+            }
+            hideQuickBet={hideQuickBet}
+            hideGroupLink={hideGroupLink}
+            className={clsx(
+              'break-inside-avoid-column',
+              contractIds?.includes(contract.id) && highlightClassName
+            )}
+          />
+        ))}
+      </div>
       <VisibilityObserver
         onVisibilityUpdated={onVisibilityUpdated}
         className="relative -top-96 h-1"