Fix tooltip styles in your bets (#783)

* Only show answer tooltips if truncated

* Always wrap in tooltip

* refactor. make title in dialog less big

web/components/bets-list.tsx

@@ -534,9 +534,8 @@ export function ContractBetsTable(props: {
   contract: Contract
   bets: Bet[]
   isYourBets: boolean
-  className?: string
 }) {
-  const { contract, className, isYourBets } = props
+  const { contract, isYourBets } = props
 
   const bets = sortBy(
     props.bets.filter((b) => !b.isAnte && b.amount !== 0),
@@ -568,7 +567,7 @@ export function ContractBetsTable(props: {
   const unfilledBets = useUnfilledBets(contract.id) ?? []
 
   return (
-    <div className={clsx('overflow-x-auto', className)}>
+    <div className="overflow-x-auto">
       {amountRedeemed > 0 && (
         <>
           <div className="pl-2 text-sm text-gray-500">
@@ -771,7 +770,7 @@ function SellButton(props: {
         setIsSubmitting(false)
       }}
     >
-      <div className="mb-4 text-2xl">
+      <div className="mb-4 text-xl">
         Sell {formatWithCommas(shares)} shares of{' '}
         <OutcomeLabel outcome={outcome} contract={contract} truncate="long" />{' '}
         for {formatMoney(saleAmount)}?

web/components/contract/contract-card.tsx

@@ -120,7 +120,7 @@ export function ContractCard(props: {
               truncate={'long'}
             />
           ) : (
-            <FreeResponseTopAnswer contract={contract} truncate="long" />
+            <FreeResponseTopAnswer contract={contract} />
           ))}
       </Col>
       {showQuickBet ? (
@@ -230,10 +230,9 @@ export function BinaryResolutionOrChance(props: {
 
 function FreeResponseTopAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
-  truncate: 'short' | 'long' | 'none'
   className?: string
 }) {
-  const { contract, truncate } = props
+  const { contract } = props
 
   const topAnswer = getTopAnswer(contract)
 
@@ -241,7 +240,7 @@ function FreeResponseTopAnswer(props: {
     <AnswerLabel
       className="!text-gray-600"
       answer={topAnswer}
-      truncate={truncate}
+      truncate="long"
     />
   ) : null
 }

web/components/outcome-label.tsx

@@ -90,13 +90,11 @@ export function FreeResponseOutcomeLabel(props: {
   const chosen = contract.answers?.find((answer) => answer.id === resolution)
   if (!chosen) return <AnswerNumberLabel number={resolution} />
   return (
-    <Tooltip text={chosen.text}>
+    <AnswerLabel
-      <AnswerLabel
+      answer={chosen}
-        answer={chosen}
+      truncate={truncate}
-        truncate={truncate}
+      className={answerClassName}
-        className={answerClassName}
+    />
-      />
-    </Tooltip>
   )
 }
 
@@ -165,11 +163,13 @@ export function AnswerLabel(props: {
   }
 
   return (
-    <span
+    <Tooltip text={truncated === text ? false : text}>
-      style={{ wordBreak: 'break-word' }}
+      <span
-      className={clsx('whitespace-pre-line break-words', className)}
+        style={{ wordBreak: 'break-word' }}
-    >
+        className={clsx('whitespace-pre-line break-words', className)}
-      {truncated}
+      >
-    </span>
+        {truncated}
+      </span>
+    </Tooltip>
   )
 }

web/components/tooltip.tsx

@@ -79,7 +79,7 @@ export function Tooltip(props: {
         role="tooltip"
         ref={floating}
         style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
-        className="z-10 max-w-xs rounded bg-slate-700 px-2 py-1 text-center text-sm text-white"
+        className="z-10 max-w-xs whitespace-normal rounded bg-slate-700 px-2 py-1 text-center text-sm text-white"
         {...getFloatingProps()}
       >
         {text}