Hoverable component: we've come full circle

app/soapbox/components/status_action_bar.js

@@ -663,30 +663,34 @@ class StatusActionBar extends ImmutablePureComponent {
           {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
         </div>
 
-        <Hoverable
+        <div
           ref={this.setRef}
           className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
-          component={(
-            <EmojiSelector
-              onReact={this.handleReact}
-              focused={emojiSelectorFocused}
-              onUnfocus={handleEmojiSelectorUnfocus}
-            />
-          )}
         >
-          <IconButton
-            className={classNames({
-              'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
-              'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
-            })}
-            title={meEmojiTitle}
-            src={require('@tabler/icons/icons/heart.svg')}
-            iconClassName={classNames({
-              'fill-accent-300': Boolean(meEmojiReact),
-            })}
-            // emoji={meEmojiReact}
-            onClick={this.handleLikeButtonClick}
-          />
+          <Hoverable
+            component={(
+              <EmojiSelector
+                onReact={this.handleReact}
+                focused={emojiSelectorFocused}
+                onUnfocus={handleEmojiSelectorUnfocus}
+              />
+            )}
+          >
+            <IconButton
+              className={classNames({
+                'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
+                'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+              })}
+              title={meEmojiTitle}
+              src={require('@tabler/icons/icons/heart.svg')}
+              iconClassName={classNames({
+                'fill-accent-300': Boolean(meEmojiReact),
+              })}
+              // emoji={meEmojiReact}
+              onClick={this.handleLikeButtonClick}
+            />
+          </Hoverable>
+
           {emojiReactCount !== 0 && (
             (features.exposableReactions && !features.emojiReacts) ? (
               <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} className='pointer-events-none'>
@@ -696,7 +700,7 @@ class StatusActionBar extends ImmutablePureComponent {
               <span className='detailed-status__link'>{emojiReactCount}</span>
             )
           )}
-        </Hoverable>
+        </div>
 
         {shareButton}
 

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -38,7 +38,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
   return (
     <HStack
       space={2}
-      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md w-max')}
+      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max')}
     >
       {emojis.map((emoji, i) => (
         <EmojiButton

app/soapbox/components/ui/hoverable/hoverable.tsx

@@ -1,5 +1,6 @@
-import Portal from '@reach/portal';
+import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
+import { usePopper } from 'react-popper';
 
 interface IHoverable {
   component: React.Component,
@@ -12,7 +13,9 @@ const Hoverable: React.FC<IHoverable> = ({
 }): JSX.Element => {
 
   const [portalActive, setPortalActive] = useState(false);
+
   const ref = useRef<HTMLDivElement>(null);
+  const popperRef = useRef<HTMLDivElement>(null);
 
   const handleMouseEnter = () => {
     setPortalActive(true);
@@ -22,17 +25,18 @@ const Hoverable: React.FC<IHoverable> = ({
     setPortalActive(false);
   };
 
-  const setPortalPosition = (): React.CSSProperties => {
-    if (!ref.current) return {};
-
-    const { top, height, left, width } = ref.current.getBoundingClientRect();
-
-    return {
-      top: top + height,
-      left,
-      width,
-    };
-  };
+  const { styles, attributes } = usePopper(ref.current, popperRef.current, {
+    placement: 'top-start',
+    strategy: 'fixed',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 0],
+        },
+      },
+    ],
+  });
 
   return (
     <div
@@ -41,7 +45,17 @@ const Hoverable: React.FC<IHoverable> = ({
       ref={ref}
     >
       {children}
-      {portalActive && <Portal><div className='fixed' style={setPortalPosition()}>{component}</div></Portal>}
+
+      <div
+        className={classNames('fixed z-50 transition-opacity duration-100', {
+          'opacity-0 pointer-events-none': !portalActive,
+        })}
+        ref={popperRef}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        {component}
+      </div>
     </div>
   );
 };