attempt fix for popovers

components/action-tooltip.js

@@ -15,14 +15,21 @@ export default function ActionTooltip ({ children, notForm, disable, overlayText
     <OverlayTrigger
       placement={placement || 'bottom'}
       overlay={
-        <Tooltip>
+        <Tooltip style={{ position: 'fixed' }}>
           {overlayText}
         </Tooltip>
       }
       trigger={['hover', 'focus']}
       show={formik?.isSubmitting ? false : undefined}
+      popperConfig={{
+        modifiers: {
+          preventOverflow: {
+            enabled: false
+          }
+        }
+      }}
     >
-      <span>
+      <span className='d-inline-block'>
         {children}
       </span>
     </OverlayTrigger>

components/hoverable-popover.js

@@ -26,12 +26,20 @@ export default function HoverablePopover ({ id, trigger, body, onShow }) {
       show={showOverlay}
       placement='bottom'
       onHide={handleMouseLeave}
+      popperConfig={{
+        modifiers: {
+          preventOverflow: {
+            enabled: false
+          }
+        }
+      }}
       overlay={
         <Popover
           onPointerEnter={handleMouseEnter}
           onPointerLeave={handleMouseLeave}
           onMouseLeave={handleMouseLeave}
           className={styles.HoverablePopover}
+          style={{ position: 'fixed' }}
         >
           <Popover.Body className={styles.HoverablePopover}>
             {body}