Improve group market selection UI

web/components/contract/contract-card.tsx

@@ -70,41 +70,14 @@ export function ContractCard(props: {
   return (
     <Row
       className={clsx(
-        'relative gap-3 rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
+        'group  relative gap-3 rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
         className
       )}
     >
-      <Col className="group relative flex-1 gap-3 py-4 pb-12  pl-6">
+      <Col className="relative flex-1 gap-3 py-4 pb-12  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>
-        )}
         <AvatarDetails
           contract={contract}
-          className={'hidden md:inline-flex'}
+          className={'z-10 hidden md:inline-flex'}
         />
         <p
           className={clsx(
@@ -128,7 +101,7 @@ export function ContractCard(props: {
           ))}
       </Col>
       {showQuickBet ? (
-        <QuickBet contract={contract} user={user} />
+        <QuickBet contract={contract} user={user} className="z-10" />
       ) : (
         <>
           {outcomeType === 'BINARY' && (
@@ -177,6 +150,35 @@ export function ContractCard(props: {
           hideGroupLink={hideGroupLink}
         />
       </Row>
+
+      {/* Add click layer */}
+      {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>
+      )}
     </Row>
   )
 }

web/components/contract/quick-bet.tsx

@@ -41,8 +41,9 @@ const BET_SIZE = 10
 export function QuickBet(props: {
   contract: BinaryContract | PseudoNumericContract
   user: User
+  className?: string
 }) {
-  const { contract, user } = props
+  const { contract, user, className } = props
   const { mechanism, outcomeType } = contract
   const isCpmm = mechanism === 'cpmm-1'
 
@@ -139,6 +140,7 @@ export function QuickBet(props: {
   return (
     <Col
       className={clsx(
+        className,
         '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}`

web/pages/group/[...slugs]/index.tsx

@@ -546,8 +546,13 @@ function AddContractButton(props: { group: Group; user: User }) {
         </Button>
       </div>
 
-      <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
+      <Modal
-        <Col className={' w-full gap-4 rounded-md bg-white'}>
+        open={open}
+        setOpen={setOpen}
+        className={'max-w-4xl sm:p-0'}
+        size={'xl'}
+      >
+        <Col className={'min-h-screen w-full gap-4 rounded-md bg-white'}>
           <Col className="p-8 pb-0">
             <div className={'text-xl text-indigo-700'}>
               Add a market to your group