fix(search modal): prevent overlapping tooltips, always render lists

src/components/QuestionHelper/index.tsx

@@ -22,12 +22,12 @@ const QuestionWrapper = styled.div`
   }
 `
 
-export default function QuestionHelper({ text }: { text: string }) {
+export default function QuestionHelper({ text, disabled }: { text: string; disabled?: boolean }) {
   const [showPopup, setShowPopup] = useState<boolean>(false)
 
   return (
     <span style={{ marginLeft: 4 }}>
-      <Tooltip text={text} showPopup={showPopup}>
+      <Tooltip text={text} showPopup={showPopup && !disabled}>
         <QuestionWrapper
           onClick={() => {
             setShowPopup(true)

src/components/SearchModal/index.tsx

@@ -143,6 +143,7 @@ function SearchModal({
             <Text fontWeight={500} fontSize={16}>
               {isTokenView ? 'Select a token' : 'Select a pool'}
               <QuestionHelper
+                disabled={tooltipOpen}
                 text={
                   isTokenView
                     ? 'Find a token by searching for its name or symbol or by pasting its address below.'
@@ -183,8 +184,7 @@ function SearchModal({
           </RowBetween>
         </PaddedColumn>
         <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
-        {isTokenView
-          ? isOpen && (
+        {isTokenView ? (
           <TokenList
             tokens={filteredTokens}
             allTokenBalances={allTokenBalances}
@@ -195,8 +195,7 @@ function SearchModal({
             selectedToken={hiddenToken}
             showSendWithSwap={showSendWithSwap}
           />
-            )
-          : isOpen && (
+        ) : (
           <PairList
             pairs={filteredPairs}
             focusTokenAddress={focusedToken?.address}