Fix nested <a> tag

web/components/contract-card.tsx

@@ -24,10 +24,15 @@ export function ContractCard(props: {
   const { probPercent } = contractMetrics(contract)
 
   return (
-    <div className={className}>
+    <div
+      className={clsx(
+        'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
+        className
+      )}
+    >
       <Link href={contractPath(contract)}>
-        <a>
+        <a className="absolute left-0 right-0 top-0 bottom-0" />
-          <div className="bg-white hover:bg-gray-100 shadow-md rounded-lg p-6">
+      </Link>
       <Row className="justify-between gap-4 mb-2">
         <p className="font-medium text-indigo-700">{question}</p>
         <ResolutionOrChance
@@ -36,13 +41,7 @@ export function ContractCard(props: {
           probPercent={probPercent}
         />
       </Row>
-            <AbbrContractDetails
+      <AbbrContractDetails contract={contract} showHotVolume={showHotVolume} />
-              contract={contract}
-              showHotVolume={showHotVolume}
-            />
-          </div>
-        </a>
-      </Link>
     </div>
   )
 }

web/components/user-page.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { firebaseLogout, User } from '../lib/firebase/users'
 import { CreatorContractsList } from './contracts-list'
 import { Title } from './title'
@@ -16,7 +17,7 @@ export function UserLink(props: {
   const { name, username, showUsername, className } = props
 
   return (
-    <SiteLink href={`/${username}`} className={className}>
+    <SiteLink href={`/${username}`} className={clsx('z-10', className)}>
       {name}
       {showUsername && ` (@${username})`}
     </SiteLink>