From 31e1f4ba28a5f5f4828fcfa107cac25f88ec1a0c Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sun, 22 May 2022 12:08:30 -0700
Subject: [PATCH] Improve click targets

---
 web/components/contract/contract-card.tsx | 25 ++++++++++++-----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 80757c1c..3aa0869c 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -103,9 +103,20 @@ export function ContractCard(props: {
       >
         <Row>
           <Col className="relative flex-1 gap-3 pr-1">
+            <div
+              className={clsx(
+                'peer absolute -left-6 -top-4 -bottom-4 z-10',
+                // Hack: Extend the clickable area for closed markets
+                marketClosed ? 'right-[-6.5rem]' : 'right-0'
+              )}
+            >
+              <Link href={contractPath(contract)}>
+                <a className="absolute top-0 left-0 right-0 bottom-0" />
+              </Link>
+            </div>
             <AvatarDetails contract={contract} />
             <p
-              className="break-words font-medium text-indigo-700"
+              className="break-words font-medium text-indigo-700 peer-hover:underline peer-hover:decoration-indigo-400 peer-hover:decoration-2"
               style={{ /* For iOS safari */ wordBreak: 'break-word' }}
             >
               {question}
@@ -123,15 +134,6 @@ export function ContractCard(props: {
               showHotVolume={showHotVolume}
               showCloseTime={showCloseTime}
             />
-            <Link href={contractPath(contract)}>
-              {/* Note: Extends bg but not click target on closed markets */}
-              <a
-                className={clsx(
-                  'absolute -left-6 -top-4 -bottom-4',
-                  marketClosed ? 'right-[-6rem]' : 'right-0'
-                )}
-              />
-            </Link>
           </Col>
 
           <Col className="relative -my-4 -mr-5 min-w-[6rem] justify-center gap-2 pr-5 pl-3 align-middle">
@@ -186,8 +188,7 @@ export function ContractCard(props: {
               <div>
                 <div
                   className="peer absolute bottom-0 left-0 right-0 h-[50%]"
-                  onClick={() => {
-                  }}
+                  onClick={() => {}}
                 ></div>
                 {contract.createdTime % 3 == 2 ? (
                   <TriangleDownFillIcon