From 0b711be4802c73652892011c990aa8297f3c97bf Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Sun, 14 Aug 2022 01:05:17 -0700
Subject: [PATCH] Clean up a bunch of markup and CSS on contract cards (#753)

* Remove random unnecessary top-level divs

* Remove wrapper in MiscDetails

* Remove another wrapper in ContractCard

* Fix a bunch of weird CSS stuff
---
 web/components/contract/contract-card.tsx | 197 ++++++++++------------
 web/components/contract/quick-bet.tsx     |   2 +-
 2 files changed, 94 insertions(+), 105 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index ac1a2fa2..b4f20a40 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -66,115 +66,104 @@ export function ContractCard(props: {
     !hideQuickBet
 
   return (
-    <div>
-      <Col
-        className={clsx(
-          'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer hover:bg-gray-100',
-          className
-        )}
-      >
-        <Row>
-          <Col className="relative flex-1 gap-3 pr-1">
-            <div
-              className={clsx(
-                'peer absolute -left-6 -top-4 -bottom-4 z-10',
-                hideQuickBet ? '-right-20' : 'right-0'
-              )}
-            >
-              {onClick ? (
-                <a
-                  className="absolute top-0 left-0 right-0 bottom-0"
-                  href={contractPath(contract)}
-                  onClick={(e) => {
-                    // Let the browser handle the link click (opens in new tab).
-                    if (e.ctrlKey || e.metaKey) return
+    <Row
+      className={clsx(
+        'relative gap-3 self-start rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
+        className
+      )}
+    >
+      <Col className="group relative flex-1 gap-3 py-4 pl-6">
+        {onClick ? (
+          <a
+            className="absolute top-0 left-0 right-0 bottom-0"
+            href={contractPath(contract)}
+            onClick={(e) => {
+              // Let the browser handle the link click (opens in new tab).
+              if (e.ctrlKey || e.metaKey) return
 
-                    e.preventDefault()
-                    track('click market card', {
-                      slug: contract.slug,
-                      contractId: contract.id,
-                    })
-                    onClick()
-                  }}
-                />
-              ) : (
-                <Link href={contractPath(contract)}>
-                  <a
-                    onClick={trackCallback('click market card', {
-                      slug: contract.slug,
-                      contractId: contract.id,
-                    })}
-                    className="absolute top-0 left-0 right-0 bottom-0"
-                  />
-                </Link>
-              )}
-            </div>
-            <AvatarDetails contract={contract} />
-            <p
-              className="break-words font-semibold text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
-              style={{ /* For iOS safari */ wordBreak: 'break-word' }}
-            >
-              {question}
-            </p>
-
-            {(outcomeType === 'FREE_RESPONSE' ||
-              outcomeType === 'MULTIPLE_CHOICE') &&
-              (resolution ? (
-                <FreeResponseOutcomeLabel
-                  contract={contract}
-                  resolution={resolution}
-                  truncate={'long'}
-                />
-              ) : (
-                <FreeResponseTopAnswer contract={contract} truncate="long" />
-              ))}
-
-            <MiscDetails
-              contract={contract}
-              showHotVolume={showHotVolume}
-              showTime={showTime}
-              hideGroupLink={hideGroupLink}
+              e.preventDefault()
+              track('click market card', {
+                slug: contract.slug,
+                contractId: contract.id,
+              })
+              onClick()
+            }}
+          />
+        ) : (
+          <Link href={contractPath(contract)}>
+            <a
+              onClick={trackCallback('click market card', {
+                slug: contract.slug,
+                contractId: contract.id,
+              })}
+              className="absolute top-0 left-0 right-0 bottom-0"
+            />
+          </Link>
+        )}
+        <AvatarDetails contract={contract} />
+        <p
+          className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
+          style={{ /* For iOS safari */ wordBreak: 'break-word' }}
+        >
+          {question}
+        </p>
+
+        {(outcomeType === 'FREE_RESPONSE' ||
+          outcomeType === 'MULTIPLE_CHOICE') &&
+          (resolution ? (
+            <FreeResponseOutcomeLabel
+              contract={contract}
+              resolution={resolution}
+              truncate={'long'}
             />
-          </Col>
-          {showQuickBet ? (
-            <QuickBet contract={contract} user={user} />
           ) : (
-            <Col className="m-auto pl-2">
-              {outcomeType === 'BINARY' && (
-                <BinaryResolutionOrChance
-                  className="items-center"
-                  contract={contract}
-                />
-              )}
+            <FreeResponseTopAnswer contract={contract} truncate="long" />
+          ))}
 
-              {outcomeType === 'PSEUDO_NUMERIC' && (
-                <PseudoNumericResolutionOrExpectation
-                  className="items-center"
-                  contract={contract}
-                />
-              )}
-
-              {outcomeType === 'NUMERIC' && (
-                <NumericResolutionOrExpectation
-                  className="items-center"
-                  contract={contract}
-                />
-              )}
-
-              {(outcomeType === 'FREE_RESPONSE' ||
-                outcomeType === 'MULTIPLE_CHOICE') && (
-                <FreeResponseResolutionOrChance
-                  className="self-end text-gray-600"
-                  contract={contract}
-                  truncate="long"
-                />
-              )}
-              <ProbBar contract={contract} />
-            </Col>
-          )}
-        </Row>
+        <MiscDetails
+          contract={contract}
+          showHotVolume={showHotVolume}
+          showTime={showTime}
+          hideGroupLink={hideGroupLink}
+        />
       </Col>
-    </div>
+      {showQuickBet ? (
+        <QuickBet contract={contract} user={user} />
+      ) : (
+        <>
+          {outcomeType === 'BINARY' && (
+            <BinaryResolutionOrChance
+              className="items-center self-center pr-5"
+              contract={contract}
+            />
+          )}
+
+          {outcomeType === 'PSEUDO_NUMERIC' && (
+            <PseudoNumericResolutionOrExpectation
+              className="items-center self-center pr-5"
+              contract={contract}
+            />
+          )}
+
+          {outcomeType === 'NUMERIC' && (
+            <NumericResolutionOrExpectation
+              className="items-center self-center pr-5"
+              contract={contract}
+            />
+          )}
+
+          {(outcomeType === 'FREE_RESPONSE' ||
+            outcomeType === 'MULTIPLE_CHOICE') && (
+            <FreeResponseResolutionOrChance
+              className="items-center self-center pr-5 text-gray-600"
+              contract={contract}
+              truncate="long"
+            />
+          )}
+          <ProbBar contract={contract} />
+        </>
+      )}
+    </Row>
   )
 }
 
diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
index 482aea47..92cee018 100644
--- a/web/components/contract/quick-bet.tsx
+++ b/web/components/contract/quick-bet.tsx
@@ -138,7 +138,7 @@ export function QuickBet(props: {
   return (
     <Col
       className={clsx(
-        'relative -my-4 -mr-5 min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
+        'relative min-w-[5.5rem] justify-center gap-2 pr-5 pl-1 align-middle'
         // Use this for colored QuickBet panes
         // `bg-opacity-10 bg-${color}`
       )}