Fix tooltip placement bugs by upgrading Popper

ts/components/MediaQualitySelector.tsx

@@ -103,7 +103,7 @@ export const MediaQualitySelector = ({
       </Reference>
       {menuShowing && popperRoot
         ? createPortal(
-            <Popper placement="top-start" positionFixed>
+            <Popper placement="top-start" strategy="fixed">
               {({ ref, style, placement }) => (
                 <div
                   className="MediaQualitySelector__popper"

ts/components/Tooltip.tsx

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
 import { Manager, Reference, Popper } from 'react-popper';
 import { Theme, themeClassName } from '../util/theme';
 import { multiRef } from '../util/multiRef';
+import { offsetDistanceModifier } from '../util/popperUtil';
 
 type EventWrapperPropsType = {
   children: React.ReactNode;
@@ -96,7 +97,7 @@ export const Tooltip: React.FC<PropsType> = ({
           </TooltipEventWrapper>
         )}
       </Reference>
-      <Popper placement={direction}>
+      <Popper placement={direction} modifiers={[offsetDistanceModifier(12)]}>
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
             <div

ts/components/conversation/Message.tsx

@@ -63,6 +63,7 @@ import { createRefMerger } from '../_util';
 import { emojiToData } from '../emoji/lib';
 import { SmartReactionPicker } from '../../state/smart/ReactionPicker';
 import { getCustomColorStyle } from '../../util/getCustomColorStyle';
+import { offsetDistanceModifier } from '../../util/popperUtil';
 
 type Trigger = {
   handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -1429,7 +1430,7 @@ export class Message extends React.Component<Props, State> {
         {reactionPickerRoot &&
           createPortal(
             // eslint-disable-next-line consistent-return
-            <Popper placement="top">
+            <Popper placement="top" modifiers={[offsetDistanceModifier(4)]}>
               {({ ref, style }) => (
                 <SmartReactionPicker
                   ref={ref}

ts/components/emoji/EmojiButton.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -129,7 +129,7 @@ export const EmojiButton = React.memo(
         </Reference>
         {open && popperRoot
           ? createPortal(
-              <Popper placement="top-start" positionFixed>
+              <Popper placement="top-start" strategy="fixed">
                 {({ ref, style }) => (
                   <EmojiPicker
                     ref={ref}

ts/components/stickers/StickerButton.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -10,6 +10,7 @@ import { StickerPicker } from './StickerPicker';
 import { countStickers } from './lib';
 import { StickerPackType, StickerType } from '../../state/ducks/stickers';
 import { LocalizerType } from '../../types/Util';
+import { offsetDistanceModifier } from '../../util/popperUtil';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
@@ -202,7 +203,11 @@ export const StickerButton = React.memo(
           )}
         </Reference>
         {!open && !showIntroduction && installedPack ? (
-          <Popper placement={position} key={installedPack.id}>
+          <Popper
+            placement={position}
+            key={installedPack.id}
+            modifiers={[offsetDistanceModifier(6)]}
+          >
             {({ ref, style, placement, arrowProps }) => (
               <button
                 type="button"
@@ -239,7 +244,7 @@ export const StickerButton = React.memo(
           </Popper>
         ) : null}
         {!open && showIntroduction ? (
-          <Popper placement={position}>
+          <Popper placement={position} modifiers={[offsetDistanceModifier(6)]}>
             {({ ref, style, placement, arrowProps }) => (
               <button
                 type="button"