fix(mobile): increase font sizes and other mobile-centric improvements (#1907)

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -1,7 +1,7 @@
 import { useDocumentRect } from '@/Hooks/useDocumentRect'
 import { useAutoElementRect } from '@/Hooks/useElementRect'
 import { classNames } from '@/Utils/ConcatenateClassNames'
-import { useState } from 'react'
+import { useCallback, useLayoutEffect, useState } from 'react'
 import Icon from '../Icon/Icon'
 import Portal from '../Portal/Portal'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
@@ -54,6 +54,18 @@ const PositionedPopoverContent = ({
 
   useDisableBodyScrollOnMobile()
 
+  const correctInitialScrollForOverflowedContent = useCallback(() => {
+    if (popoverElement) {
+      setTimeout(() => {
+        popoverElement.scrollTop = 0
+      })
+    }
+  }, [popoverElement])
+
+  useLayoutEffect(() => {
+    correctInitialScrollForOverflowedContent()
+  }, [popoverElement, correctInitialScrollForOverflowedContent])
+
   return (
     <Portal>
       <div
@@ -70,15 +82,13 @@ const PositionedPopoverContent = ({
             : '',
           top: !isDesktopScreen ? `${document.documentElement.scrollTop}px` : '',
         }}
-        ref={(node) => {
-          setPopoverElement(node)
-        }}
+        ref={setPopoverElement}
         data-popover={id}
       >
         <div className="md:hidden">
           <div className="flex items-center justify-end px-3 pt-2">
             <button className="rounded-full border border-border p-1" onClick={togglePopover}>
-              <Icon type="close" className="h-4 w-4" />
+              <Icon type="close" className="h-6 w-6" />
             </button>
           </div>
           <HorizontalSeparator classes="my-2" />