Rearrange contract overview (-10 LOC!)

web/components/contract-card.tsx

@@ -184,7 +184,7 @@ export function ContractDetails(props: {
 
   return (
     <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
-      <Row className="flex-wrap items-center gap-x-3 gap-y-3">
+      <Row className="flex-wrap items-center gap-x-4 gap-y-3">
         <Row className="items-center gap-2">
           <Avatar
             username={creatorUsername}

web/components/contract-overview.tsx

@@ -34,43 +34,33 @@ export const ContractOverview = (props: {
 
   return (
     <Col className={clsx('mb-6', className)}>
-      <Row className="justify-between gap-4 px-2">
-        <Col className="gap-4">
+      <Col className="gap-4 px-2">
+        <Row className="justify-between gap-4">
           <div className="text-2xl text-indigo-700 md:text-3xl">
             <Linkify text={question} />
           </div>
 
-          <Row className="items-center justify-between gap-4">
-            {(isBinary || resolution) && (
-              <ResolutionOrChance
-                className="md:hidden"
-                contract={contract}
-                large
-              />
-            )}
-
-            {isBinary && tradingAllowed(contract) && (
-              <BetRow
-                contract={contract}
-                className="md:hidden"
-                labelClassName="hidden"
-              />
-            )}
-          </Row>
-
-          <ContractDetails contract={contract} isCreator={isCreator} />
-        </Col>
-
-        {(isBinary || resolution) && (
-          <Col className="hidden md:flex items-end justify-between">
+          {(isBinary || resolution) && (
             <ResolutionOrChance
-              className="items-end"
+              className="hidden md:flex items-end"
               contract={contract}
               large
             />
-          </Col>
-        )}
-      </Row>
+          )}
+        </Row>
+
+        <Row className="md:hidden items-center justify-between gap-4">
+          {(isBinary || resolution) && (
+            <ResolutionOrChance contract={contract} />
+          )}
+
+          {isBinary && tradingAllowed(contract) && (
+            <BetRow contract={contract} labelClassName="hidden" />
+          )}
+        </Row>
+
+        <ContractDetails contract={contract} isCreator={isCreator} />
+      </Col>
 
       <Spacer h={4} />