From 1b17d3a102bd5c7d87e7edd43b58f9954a9eabb0 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 21 May 2022 13:50:34 -0700
Subject: [PATCH] Fix Free Response card layouts

---
 web/components/contract/contract-card.tsx | 33 ++++++++++++++++++-----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 1a5c660c..43f009a0 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -94,7 +94,7 @@ export function ContractCard(props: {
     <div>
       <Col
         className={clsx(
-          'relative gap-3 rounded-lg bg-white p-6 pr-7 shadow-md hover:bg-gray-100',
+          'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-7 shadow-md hover:bg-gray-100',
           className
         )}
       >
@@ -112,6 +112,13 @@ export function ContractCard(props: {
               {question}
             </p>
 
+            {outcomeType === 'FREE_RESPONSE' && (
+              <FreeResponseTopAnswer
+                contract={contract as FullContract<DPM, FreeResponse>}
+                truncate="long"
+              />
+            )}
+
             <MiscDetails
               contract={contract}
               showHotVolume={showHotVolume}
@@ -216,6 +223,25 @@ export function BinaryResolutionOrChance(props: {
   )
 }
 
+function FreeResponseTopAnswer(props: {
+  contract: FreeResponseContract
+  truncate: 'short' | 'long' | 'none'
+  className?: string
+}) {
+  const { contract, truncate, className } = props
+  const { resolution } = contract
+
+  const topAnswer = getTopAnswer(contract)
+
+  return topAnswer ? (
+    <AnswerLabel
+      className="!text-gray-600"
+      answer={topAnswer}
+      truncate={truncate}
+    />
+  ) : null
+}
+
 export function FreeResponseResolutionOrChance(props: {
   contract: FreeResponseContract
   truncate: 'short' | 'long' | 'none'
@@ -242,11 +268,6 @@ export function FreeResponseResolutionOrChance(props: {
       ) : (
         topAnswer && (
           <Row className="items-center gap-6">
-            <AnswerLabel
-              className="!text-gray-600"
-              answer={topAnswer}
-              truncate={truncate}
-            />
             <Col className={clsx('text-3xl', textColor)}>
               <div>
                 {formatPercent(getOutcomeProbability(contract, topAnswer.id))}