fix: improved reaction popup positioning for tooltip and box

ts/components/conversation/message/message-content/MessageReactions.tsx

@@ -10,7 +10,7 @@ import { Reaction, ReactionProps } from '../reactions/Reaction';
 import { SessionIcon } from '../../../icon';
 import { useMessageReactsPropsById } from '../../../../hooks/useParamSelector';
 
-export const popupXDefault = -101;
+export const popupXDefault = -81;
 export const popupYDefault = -90;
 
 const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number }>`

ts/components/conversation/message/reactions/Reaction.tsx

@@ -5,7 +5,7 @@ import { abbreviateNumber } from '../../../../util/abbreviateNumber';
 import { nativeEmojiData } from '../../../../util/emoji';
 import styled from 'styled-components';
 import { useMouse } from 'react-use';
-import { ReactionPopup, TipPosition } from './ReactionPopup';
+import { POPUP_WIDTH, ReactionPopup, TipPosition } from './ReactionPopup';
 import { popupXDefault, popupYDefault } from '../message-content/MessageReactions';
 import { isUsAnySogsFromCache } from '../../../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 
@@ -77,7 +77,7 @@ export const Reaction = (props: ReactionProps): ReactElement => {
   const { docX, elW } = useMouse(reactionRef);
 
   const gutterWidth = 380;
-  const tooltipMidPoint = 108; // width is 216px;
+  const tooltipMidPoint = POPUP_WIDTH / 2; // px
   const [tooltipPosition, setTooltipPosition] = useState<TipPosition>('center');
 
   const me = UserUtils.getOurPubKeyStrFromCache();
@@ -108,7 +108,7 @@ export const Reaction = (props: ReactionProps): ReactElement => {
             const { innerWidth: windowWidth } = window;
             if (handlePopupReaction) {
               // overflow on far right means we shift left
-              if (docX + tooltipMidPoint > windowWidth) {
+              if (docX + elW + tooltipMidPoint > windowWidth) {
                 handlePopupX(Math.abs(popupXDefault) * 1.5 * -1);
                 setTooltipPosition('right');
                 // overflow onto conversations means we lock to the right

ts/components/conversation/message/reactions/ReactionPopup.tsx

@@ -8,11 +8,13 @@ import { nativeEmojiData } from '../../../../util/emoji';
 
 export type TipPosition = 'center' | 'left' | 'right';
 
+export const POPUP_WIDTH = 216; // px
+
 export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 244px;
+  width: ${POPUP_WIDTH}px;
   height: 72px;
   z-index: 5;
 
@@ -35,10 +37,10 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
         case 'left':
           return '24px';
         case 'right':
-          return 'calc(100% - 48px)';
+          return 'calc(100% - 78px)';
         case 'center':
         default:
-          return 'calc(100% - 100px)';
+          return 'calc(100% - 118px)';
       }
     }};
     width: 22px;