Workaround for popover placement on elements that move, styling for small amounts of search results

src/components/Popover/index.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { usePopper } from 'react-popper'
 import styled, { keyframes } from 'styled-components'
+import useInterval from '../../hooks/useInterval'
 
 const fadeIn = keyframes`
   from {
@@ -105,7 +106,7 @@ export default function Popover({ content, showPopup, children }: PopoverProps)
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement>(null)
   const [arrowElement, setArrowElement] = useState<HTMLDivElement>(null)
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  const { styles, update, attributes } = usePopper(referenceElement, popperElement, {
     placement: 'auto',
     strategy: 'fixed',
     modifiers: [
@@ -127,6 +128,8 @@ export default function Popover({ content, showPopup, children }: PopoverProps)
     document.getElementById('popover-container')
   )
 
+  useInterval(update, showPopup ? 100 : null)
+
   return (
     <>
       <ReferenceElement ref={setReferenceElement}>{children}</ReferenceElement>

src/components/SearchModal/PairList.tsx

@@ -25,7 +25,13 @@ export default function PairList({
   }
 
   return (
-    <FixedSizeList itemSize={54} height={500} itemCount={pairs.length} width="100%" style={{ flex: '1' }}>
+    <FixedSizeList
+      itemSize={54}
+      height={500}
+      itemCount={pairs.length}
+      width="100%"
+      style={{ flex: '1', minHeight: 200 }}
+    >
       {({ index, style }) => {
         const pair = pairs[index]
 

src/components/SearchModal/TokenList.tsx

@@ -47,7 +47,13 @@ export default function TokenList({
     return <ModalInfo>{t('noToken')}</ModalInfo>
   }
   return (
-    <FixedSizeList width="100%" height={500} itemCount={tokens.length} itemSize={50} style={{ flex: '1' }}>
+    <FixedSizeList
+      width="100%"
+      height={500}
+      itemCount={tokens.length}
+      itemSize={50}
+      style={{ flex: '1', minHeight: 200 }}
+    >
       {({ index, style }) => {
         const { address, symbol } = tokens[index]