From a9f846e8fc751b35f5e99e7cd5aa555ca99931b8 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sat, 20 Aug 2022 13:05:33 -0700
Subject: [PATCH] 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              |  7 +++---
 web/components/contract/contract-card.tsx |  7 +++---
 web/components/outcome-label.tsx          | 26 +++++++++++------------
 web/components/tooltip.tsx                |  2 +-
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index e8d85dba..c3058a45 100644
--- a/web/components/bets-list.tsx
+++ b/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)}?
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index c3bf1a31..090020e0 100644
--- a/web/components/contract/contract-card.tsx
+++ b/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
 }
diff --git a/web/components/outcome-label.tsx b/web/components/outcome-label.tsx
index 85e171d8..3260018c 100644
--- a/web/components/outcome-label.tsx
+++ b/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
-        answer={chosen}
-        truncate={truncate}
-        className={answerClassName}
-      />
-    </Tooltip>
+    <AnswerLabel
+      answer={chosen}
+      truncate={truncate}
+      className={answerClassName}
+    />
   )
 }
 
@@ -165,11 +163,13 @@ export function AnswerLabel(props: {
   }
 
   return (
-    <span
-      style={{ wordBreak: 'break-word' }}
-      className={clsx('whitespace-pre-line break-words', className)}
-    >
-      {truncated}
-    </span>
+    <Tooltip text={truncated === text ? false : text}>
+      <span
+        style={{ wordBreak: 'break-word' }}
+        className={clsx('whitespace-pre-line break-words', className)}
+      >
+        {truncated}
+      </span>
+    </Tooltip>
   )
 }
diff --git a/web/components/tooltip.tsx b/web/components/tooltip.tsx
index b053c6e7..ef8f5bb8 100644
--- a/web/components/tooltip.tsx
+++ b/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}